:root {
      --bg: #ffffff;
      --shell: #f6f7f9;
      --card: #ffffff;
      --soft: #f9fafb;
      --text: #101828;
      --muted: #667085;
      --faint: #98a2b3;
      --line: #edf1f4;
      --line-strong: #dfe5eb;
      --green: #10b981;
      --green-dark: #059669;
      --blue: #2563eb;
      --red: #dc2626;
      --radius: 8px;
      --font-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-family: var(--font-serif);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      letter-spacing: 0;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
      outline: 3px solid rgba(16, 185, 129, 0.09);
      outline-offset: 1px;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    h1 {
      font-size: 26px;
      line-height: 34px;
      letter-spacing: 0;
    }

    h2 {
      font-size: 22px;
      line-height: 30px;
      letter-spacing: 0;
    }

    h3 {
      font-size: 15px;
      line-height: 22px;
      letter-spacing: 0;
    }

    p {
      color: var(--muted);
      line-height: 22px;
    }

    code {
      font-family: var(--mono);
      font-size: 12px;
    }

    .app {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      min-height: 100vh;
    }

    [data-theme="dark"] {
      color-scheme: dark;
      --bg: #0f1218;
      --shell: #151922;
      --card: #181d27;
      --soft: #111620;
      --text: #f3f4f6;
      --muted: #a4adba;
      --faint: #7d8795;
      --line: #252c38;
      --line-strong: #374151;
      --green: #34d399;
      --green-dark: #6ee7b7;
      --blue: #60a5fa;
      --red: #f87171;
    }

    [data-theme="dark"] body,
    [data-theme="dark"] .register-page,
    [data-theme="dark"] .register-landing {
      background: var(--bg);
      color: var(--text);
    }

    [data-theme="dark"] .sidebar,
    [data-theme="dark"] .mobile-topbar,
    [data-theme="dark"] .mobile-menu-backdrop {
      border-color: var(--line);
      background: var(--shell);
    }

    [data-theme="dark"] .card,
    [data-theme="dark"] .account-menu,
    [data-theme="dark"] .modal-panel,
    [data-theme="dark"] .signup-card,
    [data-theme="dark"] .register-feature-card,
    [data-theme="dark"] .doc-summary,
    [data-theme="dark"] .doc-list-item,
    [data-theme="dark"] .endpoint-row {
      border-color: var(--line);
      background: var(--card);
      color: var(--text);
      box-shadow: none;
    }

    [data-theme="dark"] .nav-item,
    [data-theme="dark"] .menu-choice,
    [data-theme="dark"] .menu-action,
    [data-theme="dark"] .sidebar-user,
    [data-theme="dark"] .account-chevron,
    [data-theme="dark"] .quick-card,
    [data-theme="dark"] .profile-account-note {
      color: var(--muted);
    }

    [data-theme="dark"] .nav-item:hover,
    [data-theme="dark"] .nav-item.active,
    [data-theme="dark"] .sidebar-user:hover,
    [data-theme="dark"] .sidebar-user[aria-expanded="true"],
    [data-theme="dark"] .sidebar-user:hover .account-chevron,
    [data-theme="dark"] .sidebar-user[aria-expanded="true"] .account-chevron,
    [data-theme="dark"] .menu-choice:hover,
    [data-theme="dark"] .menu-action:hover,
    [data-theme="dark"] .menu-choice.active,
    [data-theme="dark"] .tabs button.active {
      border-color: var(--line);
      background: #202633;
      color: var(--text);
    }

    [data-theme="dark"] .btn,
    [data-theme="dark"] .key-action,
    [data-theme="dark"] .verify-secondary,
    [data-theme="dark"] .pay-method,
    [data-theme="dark"] .credit-option,
    [data-theme="dark"] .copy-field,
    [data-theme="dark"] .amount-input,
    [data-theme="dark"] .coupon-input,
    [data-theme="dark"] .signup-input,
    [data-theme="dark"] .profile-name-input,
    [data-theme="dark"] input,
    [data-theme="dark"] textarea {
      border-color: var(--line-strong);
      background: #111620;
      color: var(--text);
    }

    [data-theme="dark"] .btn:hover,
    [data-theme="dark"] .pay-method.active,
    [data-theme="dark"] .credit-option.active,
    [data-theme="dark"] .credit-option:hover,
    [data-theme="dark"] .pay-method:hover {
      border-color: var(--green);
      background: #16231f;
    }

    [data-theme="dark"] .btn.primary,
    [data-theme="dark"] .signup-submit,
    [data-theme="dark"] .recharge-icon {
      border-color: var(--green);
      background: #047857;
      color: #ffffff;
    }

    [data-theme="dark"] .table-wrap,
    [data-theme="dark"] table,
    [data-theme="dark"] th,
    [data-theme="dark"] td {
      border-color: var(--line);
    }

    [data-theme="dark"] th,
    [data-theme="dark"] .tabs,
    [data-theme="dark"] .track,
    [data-theme="dark"] .quick-icon,
    [data-theme="dark"] .step-num,
    [data-theme="dark"] .empty-icon {
      background: var(--soft);
      color: var(--muted);
    }

    [data-theme="dark"] .badge {
      border-color: var(--line-strong);
      background: #202633;
      color: var(--muted);
    }

    [data-theme="dark"] .badge.green {
      border-color: #065f46;
      background: #052e24;
      color: var(--green);
    }

    [data-theme="dark"] .badge.blue {
      border-color: #1d4ed8;
      background: #172554;
      color: #93c5fd;
    }

    [data-theme="dark"] .badge.red {
      border-color: #991b1b;
      background: #2f1111;
      color: #fca5a5;
    }

    [data-theme="dark"] .page-head,
    [data-theme="dark"] .menu-section + .menu-section,
    [data-theme="dark"] .plan-features,
    [data-theme="dark"] .profile-account-row {
      border-color: var(--line);
    }

    [data-theme="dark"] .plan-card.featured {
      border-color: #065f46;
      background: #13211d;
    }

    [data-theme="dark"] .code-block,
    [data-theme="dark"] pre {
      border-color: var(--line);
      background: #0b0f16;
      color: #d1d5db;
    }

    [data-theme="dark"] .modal-backdrop {
      background: rgba(3, 7, 18, 0.68);
    }

    [data-theme="dark"] .toast {
      background: #f9fafb;
      color: #111827;
    }

    .app::before {
      content: "";
      grid-column: 1;
      grid-row: 1;
      width: 240px;
    }

    body.auth-flow .app {
      grid-template-columns: minmax(0, 1fr);
    }

    body.auth-flow .app::before {
      display: none;
    }

    body.auth-flow .sidebar {
      display: none;
    }

    .mobile-topbar,
    .mobile-menu-backdrop {
      display: none;
    }

    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 30;
      display: flex;
      flex-direction: column;
      width: 240px;
      height: 100vh;
      height: 100dvh;
      padding: 28px 16px 18px;
      background: var(--shell);
      border-right: 1px solid #f1f3f6;
    }

    .logo {
      display: flex;
      align-items: center;
      width: max-content;
      max-width: 100%;
      padding: 0 10px 28px;
      color: var(--text);
      line-height: 0;
      text-decoration: none;
    }

    .app-logo-image {
      display: block;
      width: 168px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .logo-mark {
      position: relative;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: var(--green);
    }

    .logo-mark::before,
    .logo-mark::after {
      position: absolute;
      content: "";
      background: #ffffff;
    }

    .logo-mark::before {
      width: 10px;
      height: 10px;
      left: 7px;
      top: 7px;
      border-radius: 999px;
    }

    .logo-mark::after {
      width: 4px;
      height: 14px;
      left: 10px;
      top: 5px;
      border-radius: 999px;
      transform: rotate(45deg);
    }

    .logo em {
      color: var(--green);
      font-style: normal;
    }

    .nav-group {
      display: grid;
      gap: 6px;
      margin-bottom: 26px;
    }

    .nav-label {
      padding: 0 10px 6px;
      color: var(--faint);
      font-size: 12px;
      line-height: 18px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 40px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      color: #344054;
      font-weight: 650;
      text-align: left;
    }

    .nav-item:hover,
    .nav-item.active {
      background: #ffffff;
      border-color: var(--line);
      color: #111827;
    }

    .sidebar-account {
      position: relative;
      margin-top: auto;
    }

    .sidebar-user {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 32px;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      color: inherit;
      text-align: left;
    }

    .sidebar-user:hover,
    .sidebar-user[aria-expanded="true"] {
      border-color: var(--line);
      background: #ffffff;
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: var(--green);
      color: #ffffff;
      font-weight: 800;
    }

    .sidebar-user strong,
    .sidebar-user span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar-user span {
      color: var(--muted);
      font-size: 12px;
      line-height: 17px;
    }

    .sidebar-user .account-chevron {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--faint);
      justify-self: center;
      align-self: center;
      line-height: 1;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
    }

    .sidebar-user .account-chevron .icon {
      display: block;
      width: 15px;
      height: 15px;
      stroke-width: 2.2;
    }

    .sidebar-user:hover .account-chevron,
    .sidebar-user[aria-expanded="true"] .account-chevron {
      border-color: var(--line-strong);
      background: var(--soft);
      color: var(--text);
    }

    .sidebar-user[aria-expanded="true"] .account-chevron {
      transform: rotate(180deg);
    }

    .account-menu {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 10px);
      z-index: 20;
      padding: 10px 8px;
      border: 1px solid #f0f2f5;
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055), 0 1px 2px rgba(15, 23, 42, 0.025);
    }

    .account-menu[hidden] {
      display: none;
    }

    .menu-section + .menu-section {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #f3f5f7;
    }

    .menu-label {
      margin-bottom: 4px;
      padding: 0 7px;
      color: #b3bcc8;
      font-size: 10px;
      font-weight: 600;
      line-height: 16px;
    }

    .menu-row {
      display: grid;
      gap: 2px;
    }

    .menu-choice,
    .menu-action {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      width: 100%;
      padding: 0 8px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: #475467;
      font-size: 13px;
      font-weight: 500;
      text-align: left;
    }

    .menu-choice:hover,
    .menu-action:hover {
      background: #fafbfc;
      color: #111827;
    }

    .menu-choice.active {
      color: #111827;
    }

    .menu-choice.active::after {
      color: var(--green);
      content: "✓";
      margin-left: auto;
      font-size: 13px;
      line-height: 1;
    }

    .menu-choice span {
      color: #98a2b3;
      font-size: 12px;
      font-weight: 500;
    }

    .menu-action.danger {
      color: #344054;
    }

    .menu-action .icon {
      width: 15px;
      height: 15px;
      color: #667085;
    }

    .main {
      grid-column: 2;
      min-width: 0;
      padding: 42px 48px 70px;
    }

    body.auth-flow .main {
      grid-column: 1;
    }

    .page {
      display: none;
      max-width: 1090px;
    }

    .page.active {
      display: block;
    }

    .crumb {
      margin-bottom: 14px;
      color: var(--faint);
      font-size: 12px;
      line-height: 18px;
    }

    .page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 28px;
      padding-bottom: 26px;
      border-bottom: 1px solid #f1f3f6;
    }

    .page-head.compact {
      margin-bottom: 20px;
      padding-bottom: 0;
      border-bottom: 0;
    }

    .page-head p {
      margin-top: 8px;
    }

    .card {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: none;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 36px;
      max-width: 100%;
      padding: 0 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: #ffffff;
      color: #111827;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }

    .btn:hover {
      background: var(--soft);
    }

    .btn.primary {
      border-color: #111827;
      background: #111827;
      color: #ffffff;
    }

    .btn.danger {
      color: var(--red);
    }

    .btn.icon-only {
      width: 36px;
      padding: 0;
    }

    .btn.icon-only.copied {
      width: auto;
      min-width: 64px;
      padding: 0 10px;
    }

    .icon {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 28px;
    }

    .stat-card {
      min-height: 128px;
      padding: 20px 18px;
    }

    .stat-label {
      margin-bottom: 12px;
      color: var(--faint);
      font-size: 12px;
      line-height: 18px;
    }

    .stat-value {
      margin-bottom: 8px;
      font-size: 26px;
      font-weight: 800;
      line-height: 1.1;
    }

    .stat-value.green {
      color: var(--green-dark);
    }

    .stat-foot {
      color: var(--muted);
      font-size: 13px;
      line-height: 19px;
    }

    .contrib-grid {
      display: grid;
      grid-template-columns: repeat(18, minmax(0, 1fr));
      gap: 3px;
      margin-top: 10px;
      max-width: 220px;
    }

    .contrib-grid span {
      aspect-ratio: 1;
      min-width: 0;
      border: 1px solid rgba(16, 24, 40, 0.02);
      border-radius: 2px;
      background: #eef2f6;
    }

    .contrib-grid span[data-level="1"] {
      background: #d1fae5;
      border-color: #c8f4dc;
    }

    .contrib-grid span[data-level="2"] {
      background: #6ee7b7;
      border-color: #6ee7b7;
    }

    .contrib-grid span[data-level="3"] {
      background: #10b981;
      border-color: #10b981;
    }

    .contrib-grid span[data-level="4"] {
      background: #047857;
      border-color: #047857;
    }

    .section {
      margin-bottom: 34px;
    }

    .section-head {
      margin-bottom: 16px;
    }

    .section-head p {
      margin-top: 4px;
    }

    .unlock-grid,
    .quick-grid,
    .usage-grid,
    .plan-grid {
      display: grid;
      gap: 14px;
    }

    .unlock-grid,
    .quick-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usage-grid {
      grid-template-columns: minmax(0, 1fr) 332px;
    }

    .plan-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-bottom: 24px;
    }

    .unlock-card,
    .quick-card {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding: 24px;
    }

    .quick-card {
      align-items: center;
      min-height: 62px;
      padding: 14px;
      color: var(--text);
      font-weight: 700;
      text-decoration: none;
    }

    .quick-icon,
    .step-num,
    .empty-icon {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--soft);
      color: var(--faint);
      font-weight: 800;
    }

    .activity-empty,
    .empty-state {
      display: grid;
      place-items: center;
      min-height: 180px;
      padding: 32px;
      text-align: center;
    }

    .recent-activity-card {
      padding: 0;
      overflow: hidden;
    }

    .recent-activity-list {
      display: grid;
    }

    .recent-activity-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 16px 18px;
    }

    .recent-activity-item + .recent-activity-item {
      border-top: 1px solid var(--line);
    }

    .recent-activity-main {
      min-width: 0;
    }

    .recent-activity-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--text);
      font-weight: 800;
    }

    .recent-activity-title strong,
    .recent-activity-meta span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recent-activity-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    .recent-activity-cost {
      color: var(--text);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 800;
      text-align: right;
      white-space: nowrap;
    }

    .activity-empty .empty-icon,
    .empty-state .empty-icon {
      margin: 0 auto 12px;
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .tabs {
      display: inline-flex;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    .tabs button {
      min-height: 30px;
      padding: 0 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-weight: 700;
    }

    .tabs button.active {
      background: #ffffff;
      color: #111827;
    }

    .usage-card,
    .plan-card,
    .line-card,
    .profile-card,
    .doc-card {
      padding: 22px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: #ffffff;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .badge.green {
      border-color: #a7f3d0;
      background: #ecfdf5;
      color: var(--green-dark);
    }

    .badge.blue {
      border-color: #bfdbfe;
      background: #eff6ff;
      color: var(--blue);
    }

    .badge.red {
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }

    .big-money,
    .price {
      margin: 12px 0 6px;
      font-size: 36px;
      font-weight: 850;
      line-height: 1.05;
    }

    .price small {
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .plan-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 330px;
      padding: 24px;
      overflow: hidden;
    }

    .plan-card.featured {
      border-color: #b7ebd1;
      background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%);
    }

    .plan-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-height: 44px;
    }

    .plan-kicker {
      margin-top: 4px;
      color: var(--faint);
      font-size: 12px;
      font-weight: 700;
      line-height: 18px;
    }

    .plan-desc {
      min-height: 44px;
      margin-top: 8px;
    }

    .plan-features {
      display: grid;
      gap: 10px;
      margin: 18px 0 22px;
      padding: 14px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .plan-feature {
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 20px;
    }

    .plan-feature::before {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--green);
      content: "";
    }

    .plan-feature strong {
      color: var(--text);
      font-weight: 750;
    }

    .plan-card .btn {
      width: 100%;
      margin-top: auto;
    }

    .recharge-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 24px;
    }

    .recharge-balance {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .recharge-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 14px;
      background: #111827;
      color: #ffffff;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(17, 24, 39, 0.14);
    }

    .recharge-icon .icon {
      width: 31px;
      height: 31px;
      stroke-width: 1.75;
    }

    .recharge-balance span,
    .recharge-metrics span,
    .field-label {
      color: var(--muted);
      font-size: 13px;
      line-height: 20px;
    }

    .recharge-balance strong {
      display: block;
      margin-top: 2px;
      color: var(--text);
      font-size: 34px;
      line-height: 1.05;
      font-weight: 850;
    }

    .recharge-metrics {
      display: grid;
      gap: 8px;
      text-align: right;
    }

    .recharge-metrics strong {
      margin-left: 8px;
      color: var(--text);
      font-weight: 800;
    }

    .recharge-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
      gap: 24px;
    }

    .recharge-panel {
      padding: 24px;
    }

    .recharge-panel h2 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-size: 20px;
      line-height: 28px;
    }

    .panel-subtitle {
      margin-top: -10px;
      margin-bottom: 20px;
    }

    .recharge-block {
      display: grid;
      gap: 12px;
      margin-top: 20px;
    }

    .pay-method-grid,
    .credit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .pay-method,
    .credit-option {
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: #ffffff;
      color: var(--text);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .pay-method.active,
    .credit-option.active,
    .credit-option:hover,
    .pay-method:hover {
      border-color: var(--green);
      background: #fbfffd;
    }

    .pay-method strong,
    .credit-option strong {
      display: block;
      font-size: 14px;
      line-height: 20px;
    }

    .pay-method span,
    .credit-option span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    .credit-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .credit-option {
      text-align: center;
    }

    .amount-input {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 14px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: #ffffff;
    }

    .amount-input input,
    .coupon-input {
      width: 100%;
      border: 0;
      background: transparent;
      font: inherit;
      outline: none;
    }

    .coupon-input {
      min-height: 46px;
      padding: 0 14px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: #ffffff;
    }

    .recharge-submit {
      width: 100%;
      min-height: 42px;
      margin-top: 20px;
    }

    .meter {
      display: grid;
      gap: 8px;
      margin-top: 18px;
    }

    .meter-row,
    .profile-row,
    .invoice-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      line-height: 22px;
    }

    .meter-row strong,
    .profile-row strong {
      color: var(--text);
    }

    .track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #eef2f6;
    }

    .fill {
      display: block;
      width: var(--value);
      height: 100%;
      border-radius: inherit;
      background: var(--green);
    }

    .copy-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding: 8px 8px 8px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    .copy-field code {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .refer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 14px;
    }

    .refer-panel {
      padding: 24px;
    }

    .unlock-card h3 {
      margin-bottom: 10px;
    }

    .unlock-card p {
      margin-bottom: 18px;
    }

    .refer-panel h2 {
      margin-top: 14px;
    }

    .refer-panel p {
      margin-top: 8px;
    }

    .refer-code-row,
    .refer-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
    }

    .refer-code {
      min-width: 0;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    .refer-code strong,
    .refer-code span {
      display: block;
    }

    .refer-code span {
      color: var(--faint);
      font-size: 12px;
      font-weight: 700;
      line-height: 18px;
    }

    .refer-code strong {
      margin-top: 2px;
      font-family: var(--mono);
      font-size: 13px;
    }

    .reward-list {
      display: grid;
      gap: 2px;
      margin-top: 18px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .reward-row {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
      color: var(--muted);
      line-height: 22px;
    }

    .reward-row + .reward-row {
      border-top: 1px solid var(--line);
    }

    .reward-row strong {
      color: var(--text);
      white-space: nowrap;
    }

    .refer-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .refer-stat {
      min-height: 118px;
      padding: 18px;
    }

    .refer-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .refer-step {
      display: grid;
      gap: 12px;
      padding: 18px;
    }

    .refer-step .step-num {
      background: rgba(16, 185, 129, 0.10);
      color: var(--green);
      font-weight: 700;
    }

    .refer-step p {
      margin-top: 0;
    }

    .share-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .share-actions .btn {
      min-height: 34px;
    }

    .refer-note {
      padding: 14px 16px;
      border-left: 3px solid var(--green);
      color: var(--muted);
    }

    .recent-empty {
      display: grid;
      place-items: center;
      min-height: 84px;
      color: var(--faint);
      text-align: center;
    }

    @keyframes skeletonPulse {
      0% {
        background-position: 120% 0;
      }

      100% {
        background-position: -120% 0;
      }
    }

    @keyframes skeletonBreath {
      0%,
      100% {
        opacity: 0.62;
      }

      50% {
        opacity: 1;
      }
    }

    .skeleton-fill,
    html.dashboard-data-loading [data-dashboard-name],
    html.dashboard-data-loading [data-dashboard-email],
    html.dashboard-data-loading [data-dashboard-welcome],
    html.dashboard-data-loading [data-current-balance],
    html.dashboard-data-loading [data-used-credit],
    html.dashboard-data-loading [data-requests-total],
    html.dashboard-data-loading [data-today-spend],
    html.dashboard-data-loading [data-usage-total-requests],
    html.dashboard-data-loading [data-usage-total-tokens],
    html.dashboard-data-loading [data-usage-total-cost],
    html.dashboard-data-loading [data-usage-average-latency],
    html.dashboard-data-loading [data-profile-requests],
    html.dashboard-data-loading [data-plan-label],
    html.dashboard-data-loading [data-usage-plan],
    html.dashboard-data-loading [data-billing-plan],
    html.dashboard-data-loading [data-profile-plan-mini],
    html.dashboard-data-loading [data-usage-used],
    html.dashboard-data-loading [data-usage-remaining-percent],
    html.dashboard-data-loading [data-refer-code],
    html.dashboard-data-loading [data-refer-link],
    html.dashboard-data-loading [data-referral-total],
    html.dashboard-data-loading [data-referral-activated],
    html.dashboard-data-loading [data-referral-rewarded],
    html.dashboard-data-loading [data-referral-pending],
    html.dashboard-data-loading [data-profile-name],
    html.dashboard-data-loading [data-profile-name-row],
    html.dashboard-data-loading [data-profile-email],
    html.dashboard-data-loading [data-profile-email-row],
    html.dashboard-data-loading [data-profile-id],
    html.dashboard-data-loading [data-profile-id-row],
    html.dashboard-data-loading [data-profile-created],
    html.dashboard-data-loading [data-profile-customer-id] {
      position: relative;
      color: transparent !important;
      overflow: hidden;
      pointer-events: none;
    }

    .skeleton-fill::after,
    html.dashboard-data-loading [data-dashboard-name]::after,
    html.dashboard-data-loading [data-dashboard-email]::after,
    html.dashboard-data-loading [data-dashboard-welcome]::after,
    html.dashboard-data-loading [data-current-balance]::after,
    html.dashboard-data-loading [data-used-credit]::after,
    html.dashboard-data-loading [data-requests-total]::after,
    html.dashboard-data-loading [data-today-spend]::after,
    html.dashboard-data-loading [data-usage-total-requests]::after,
    html.dashboard-data-loading [data-usage-total-tokens]::after,
    html.dashboard-data-loading [data-usage-total-cost]::after,
    html.dashboard-data-loading [data-usage-average-latency]::after,
    html.dashboard-data-loading [data-profile-requests]::after,
    html.dashboard-data-loading [data-plan-label]::after,
    html.dashboard-data-loading [data-usage-plan]::after,
    html.dashboard-data-loading [data-billing-plan]::after,
    html.dashboard-data-loading [data-profile-plan-mini]::after,
    html.dashboard-data-loading [data-usage-used]::after,
    html.dashboard-data-loading [data-usage-remaining-percent]::after,
    html.dashboard-data-loading [data-refer-code]::after,
    html.dashboard-data-loading [data-refer-link]::after,
    html.dashboard-data-loading [data-referral-total]::after,
    html.dashboard-data-loading [data-referral-activated]::after,
    html.dashboard-data-loading [data-referral-rewarded]::after,
    html.dashboard-data-loading [data-referral-pending]::after,
    html.dashboard-data-loading [data-profile-name]::after,
    html.dashboard-data-loading [data-profile-name-row]::after,
    html.dashboard-data-loading [data-profile-email]::after,
    html.dashboard-data-loading [data-profile-email-row]::after,
    html.dashboard-data-loading [data-profile-id]::after,
    html.dashboard-data-loading [data-profile-id-row]::after,
    html.dashboard-data-loading [data-profile-created]::after,
    html.dashboard-data-loading [data-profile-customer-id]::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: min(100%, var(--skeleton-width, 110px));
      height: var(--skeleton-height, 0.72em);
      border-radius: 999px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 44%, #eef1f5 88%);
      background-size: 240% 100%;
      animation: skeletonPulse 1.2s ease-in-out infinite;
    }

    [data-theme="dark"] .skeleton-fill::after,
    [data-theme="dark"].dashboard-data-loading [data-dashboard-name]::after,
    [data-theme="dark"].dashboard-data-loading [data-dashboard-email]::after,
    [data-theme="dark"].dashboard-data-loading [data-dashboard-welcome]::after,
    [data-theme="dark"].dashboard-data-loading [data-current-balance]::after,
    [data-theme="dark"].dashboard-data-loading [data-used-credit]::after,
    [data-theme="dark"].dashboard-data-loading [data-requests-total]::after,
    [data-theme="dark"].dashboard-data-loading [data-today-spend]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-total-requests]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-total-tokens]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-total-cost]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-average-latency]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-requests]::after,
    [data-theme="dark"].dashboard-data-loading [data-plan-label]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-plan]::after,
    [data-theme="dark"].dashboard-data-loading [data-billing-plan]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-plan-mini]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-used]::after,
    [data-theme="dark"].dashboard-data-loading [data-usage-remaining-percent]::after,
    [data-theme="dark"].dashboard-data-loading [data-refer-code]::after,
    [data-theme="dark"].dashboard-data-loading [data-refer-link]::after,
    [data-theme="dark"].dashboard-data-loading [data-referral-total]::after,
    [data-theme="dark"].dashboard-data-loading [data-referral-activated]::after,
    [data-theme="dark"].dashboard-data-loading [data-referral-rewarded]::after,
    [data-theme="dark"].dashboard-data-loading [data-referral-pending]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-name]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-name-row]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-email]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-email-row]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-id]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-id-row]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-created]::after,
    [data-theme="dark"].dashboard-data-loading [data-profile-customer-id]::after {
      background: linear-gradient(90deg, #1f2937 0%, #334155 44%, #1f2937 88%);
      background-size: 240% 100%;
    }

    html.dashboard-data-loading [data-dashboard-avatar] {
      color: transparent;
      background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 44%, #eef1f5 88%);
      background-size: 240% 100%;
      animation: skeletonPulse 1.2s ease-in-out infinite;
    }

    [data-theme="dark"].dashboard-data-loading [data-dashboard-avatar] {
      background: linear-gradient(90deg, #1f2937 0%, #334155 44%, #1f2937 88%);
      background-size: 240% 100%;
    }

    html.dashboard-data-loading [data-dashboard-welcome] {
      --skeleton-width: 260px;
      --skeleton-height: 0.82em;
    }

    html.dashboard-data-loading [data-dashboard-email],
    html.dashboard-data-loading [data-profile-email],
    html.dashboard-data-loading [data-profile-email-row],
    html.dashboard-data-loading [data-refer-link] {
      --skeleton-width: 190px;
    }

    html.dashboard-data-loading [data-current-balance],
    html.dashboard-data-loading [data-used-credit],
    html.dashboard-data-loading [data-requests-total],
    html.dashboard-data-loading [data-today-spend],
    html.dashboard-data-loading [data-usage-total-requests],
    html.dashboard-data-loading [data-usage-total-tokens],
    html.dashboard-data-loading [data-usage-total-cost],
    html.dashboard-data-loading [data-usage-average-latency] {
      --skeleton-width: 96px;
      --skeleton-height: 0.78em;
    }

    html.dashboard-data-loading [data-dashboard-activity] span {
      background: #eef1f5 !important;
    }

    [data-theme="dark"].dashboard-data-loading [data-dashboard-activity] span {
      background: #1f2937 !important;
    }

    html.dashboard-data-loading [data-recent-activity] {
      position: relative;
      min-height: 150px;
      overflow: hidden;
    }

    html.dashboard-data-loading [data-recent-activity] > * {
      visibility: hidden;
    }

    html.dashboard-data-loading [data-recent-activity]::before {
      content: "";
      position: absolute;
      inset: 18px;
      background:
        linear-gradient(90deg, #eef1f5 0 0) 0 0 / 42px 22px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 56px 3px / 180px 12px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 56px 27px / 70% 10px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) right 3px top 3px / 82px 12px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 0 58px / 42px 22px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 56px 61px / 220px 12px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 56px 85px / 62% 10px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) right 3px top 61px / 82px 12px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 0 116px / 42px 22px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 56px 119px / 160px 12px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) 56px 143px / 66% 10px no-repeat,
        linear-gradient(90deg, #eef1f5 0 0) right 3px top 119px / 82px 12px no-repeat;
      animation: skeletonBreath 1.35s ease-in-out infinite;
    }

    [data-theme="dark"].dashboard-data-loading [data-recent-activity]::before {
      background:
        linear-gradient(90deg, #1f2937 0 0) 0 0 / 42px 22px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 56px 3px / 180px 12px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 56px 27px / 70% 10px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) right 3px top 3px / 82px 12px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 0 58px / 42px 22px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 56px 61px / 220px 12px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 56px 85px / 62% 10px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) right 3px top 61px / 82px 12px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 0 116px / 42px 22px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 56px 119px / 160px 12px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) 56px 143px / 66% 10px no-repeat,
        linear-gradient(90deg, #1f2937 0 0) right 3px top 119px / 82px 12px no-repeat;
    }

    html.dashboard-data-loading [data-api-key-rows] td,
    html.dashboard-data-loading [data-dashboard-logs] td,
    html.dashboard-data-loading [data-referral-rows] td {
      position: relative;
      color: transparent !important;
      overflow: hidden;
    }

    html.dashboard-data-loading [data-api-key-rows] td::after,
    html.dashboard-data-loading [data-dashboard-logs] td::after,
    html.dashboard-data-loading [data-referral-rows] td::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      top: 50%;
      height: 12px;
      border-radius: 999px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 44%, #eef1f5 88%);
      background-size: 240% 100%;
      animation: skeletonPulse 1.2s ease-in-out infinite;
    }

    [data-theme="dark"].dashboard-data-loading [data-api-key-rows] td::after,
    [data-theme="dark"].dashboard-data-loading [data-dashboard-logs] td::after,
    [data-theme="dark"].dashboard-data-loading [data-referral-rows] td::after {
      background: linear-gradient(90deg, #1f2937 0%, #334155 44%, #1f2937 88%);
      background-size: 240% 100%;
    }

    html.dashboard-data-loading .main .page.active :where(
      .crumb,
      .page-head h1,
      .page-head p,
      .section-head h2,
      .section-head p,
      .stat-label,
      .stat-foot,
      .unlock-card h3,
      .unlock-card p,
      .quick-card,
      .btn,
      .key-table th,
      .usage-card h3,
      .usage-card p,
      .plan-card h3,
      .plan-card p,
      .profile-row span,
      .profile-row strong,
      .line-card h3,
      .line-card p,
      .refer-step h3,
      .refer-step p,
      .refer-note,
      #images .image-panel-head h3,
      #images .image-panel-head p,
      #images .image-panel-head span,
      #images .image-settings-head h2,
      #images .image-settings-head span,
      #images .image-label-row,
      #images .image-platform-card strong,
      #images .image-platform-card span,
      #images .settings-drawer summary,
      #images .image-template-grid strong,
      #images .image-template-grid span,
      #images .image-mode-tabs button,
      #images .segmented button,
      #images .image-generate-btn
    ) {
      position: relative;
      color: transparent !important;
      overflow: hidden;
      pointer-events: none;
    }

    html.dashboard-data-loading .main .page.active :where(
      .crumb,
      .page-head h1,
      .page-head p,
      .section-head h2,
      .section-head p,
      .stat-label,
      .stat-foot,
      .unlock-card h3,
      .unlock-card p,
      .quick-card,
      .btn,
      .key-table th,
      .usage-card h3,
      .usage-card p,
      .plan-card h3,
      .plan-card p,
      .profile-row span,
      .profile-row strong,
      .line-card h3,
      .line-card p,
      .refer-step h3,
      .refer-step p,
      .refer-note,
      #images .image-panel-head h3,
      #images .image-panel-head p,
      #images .image-panel-head span,
      #images .image-settings-head h2,
      #images .image-settings-head span,
      #images .image-label-row,
      #images .image-platform-card strong,
      #images .image-platform-card span,
      #images .settings-drawer summary,
      #images .image-template-grid strong,
      #images .image-template-grid span,
      #images .image-mode-tabs button,
      #images .segmented button,
      #images .image-generate-btn
    )::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: min(100%, var(--skeleton-width, 132px));
      height: var(--skeleton-height, 0.72em);
      border-radius: 999px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 44%, #eef1f5 88%);
      background-size: 240% 100%;
      animation: skeletonPulse 1.2s ease-in-out infinite;
    }

    [data-theme="dark"].dashboard-data-loading .main .page.active :where(
      .crumb,
      .page-head h1,
      .page-head p,
      .section-head h2,
      .section-head p,
      .stat-label,
      .stat-foot,
      .unlock-card h3,
      .unlock-card p,
      .quick-card,
      .btn,
      .key-table th,
      .usage-card h3,
      .usage-card p,
      .plan-card h3,
      .plan-card p,
      .profile-row span,
      .profile-row strong,
      .line-card h3,
      .line-card p,
      .refer-step h3,
      .refer-step p,
      .refer-note,
      #images .image-panel-head h3,
      #images .image-panel-head p,
      #images .image-panel-head span,
      #images .image-settings-head h2,
      #images .image-settings-head span,
      #images .image-label-row,
      #images .image-platform-card strong,
      #images .image-platform-card span,
      #images .settings-drawer summary,
      #images .image-template-grid strong,
      #images .image-template-grid span,
      #images .image-mode-tabs button,
      #images .segmented button,
      #images .image-generate-btn
    )::after {
      background: linear-gradient(90deg, #1f2937 0%, #334155 44%, #1f2937 88%);
      background-size: 240% 100%;
    }

    html.dashboard-data-loading .main .page.active :where(.page-head h1, .section-head h2) {
      --skeleton-width: 210px;
      --skeleton-height: 0.82em;
    }

    html.dashboard-data-loading .main .page.active :where(.page-head p, .section-head p, .unlock-card p, .plan-card p, .usage-card p, .line-card p) {
      --skeleton-width: 260px;
    }

    html.dashboard-data-loading .main .page.active :where(.btn, .quick-card, #images .image-mode-tabs button, #images .segmented button, #images .image-generate-btn) {
      --skeleton-width: 72%;
    }

    html.dashboard-data-loading .main .page.active .btn {
      border-color: transparent !important;
      background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 44%, #eef1f5 88%) !important;
      background-size: 240% 100% !important;
      box-shadow: none !important;
      animation: skeletonPulse 1.2s ease-in-out infinite;
    }

    html.dashboard-data-loading .main .page.active .btn::after {
      content: none !important;
    }

    [data-theme="dark"].dashboard-data-loading .main .page.active .btn {
      background: linear-gradient(90deg, #1f2937 0%, #334155 44%, #1f2937 88%) !important;
      background-size: 240% 100% !important;
    }

    .line-list {
      display: grid;
      gap: 12px;
    }

    .line-card {
      display: grid;
      gap: 10px;
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    th,
    td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      text-align: left;
      white-space: nowrap;
    }

    th {
      color: var(--faint);
      font-size: 12px;
      font-weight: 800;
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    .key-table-card {
      padding: 0;
      overflow: hidden;
    }

    .key-table {
      min-width: 860px;
    }

    .key-table th,
    .key-table td {
      padding: 17px 24px;
    }

    .key-table td {
      font-size: 13px;
      line-height: 20px;
    }

    .key-name {
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }

    .key-secret {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 10px;
      border-radius: 6px;
      background: var(--soft);
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      letter-spacing: 0;
    }

    .key-secret-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .key-secret-wrap .btn.icon-only {
      width: 28px;
      min-height: 28px;
      border-color: #e7ebf0;
      border-radius: 6px;
    }

    .key-action {
      border: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      cursor: pointer;
    }

    .key-action:disabled {
      color: var(--faint);
      cursor: not-allowed;
    }

    .image-workbench {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(390px, 430px);
      gap: 16px;
      align-items: start;
    }

    .image-main,
    .image-settings {
      padding: 20px;
    }

    .image-mode,
    .image-choice-grid,
    .image-template-grid,
    .image-segmented,
    .image-check-grid,
    .image-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .image-task-switch {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .image-task-switch button {
      min-height: 34px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .image-task-switch button.active {
      background: var(--card);
      color: var(--text);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .image-product-panel {
      display: grid;
      gap: 14px;
    }

    .image-product-panel[hidden] {
      display: none;
    }

    .image-panel-section {
      display: grid;
      gap: 10px;
    }

    .image-panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--text);
      font-size: 14px;
      font-weight: 850;
    }

    .image-panel-title small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .image-panel-title.muted {
      color: var(--muted);
    }

    .image-help {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .image-upload.product-upload {
      place-items: center;
      text-align: center;
      color: var(--muted);
    }

    .image-upload.product-upload.has-files {
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      place-items: stretch;
      text-align: left;
    }

    .product-upload-input {
      position: fixed;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .product-upload-empty {
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 3 / 1;
      min-height: 0;
      cursor: pointer;
    }

    .product-upload-content {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 10px;
      min-height: 76px;
    }

    .product-upload-button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 8px;
      background: var(--card);
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .product-upload-button svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .product-upload-subtitle {
      color: var(--muted);
      line-height: 20px;
    }

    .product-reference-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .product-reference-grid[hidden] {
      display: none;
    }

    .product-reference-tile,
    .product-reference-add {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1 / 1;
      border-radius: 8px;
      overflow: hidden;
      background: var(--soft);
    }

    .product-reference-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-reference-remove {
      position: absolute;
      top: 6px;
      right: 6px;
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.58);
      color: #fff;
      cursor: pointer;
      opacity: 0.92;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
      transition: opacity 0.18s ease, background 0.18s ease;
    }

    .product-reference-tile:hover .product-reference-remove,
    .product-reference-remove:focus-visible {
      opacity: 1;
    }

    .product-reference-remove:hover {
      background: rgba(15, 23, 42, 0.76);
    }

    .product-reference-remove svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .product-reference-add {
      border: 0;
      color: var(--text);
      cursor: pointer;
      font-size: 30px;
      font-weight: 500;
    }

    .reference-mode-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .reference-mode-card {
      display: grid;
      align-content: start;
      gap: 8px;
      min-height: 104px;
      padding: 14px 16px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: var(--card);
      color: var(--text);
      font: inherit;
      text-align: left;
    }

    .reference-mode-card.active {
      border-color: var(--blue);
      background: rgba(37, 99, 235, 0.05);
    }

    .reference-mode-card strong {
      color: var(--text);
      font-size: 14px;
      line-height: 20px;
    }

    .reference-mode-card span {
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    .reference-requirements {
      min-height: 58px;
      resize: none;
    }

    .image-select-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .suite-mode-card {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
    }

    .suite-mode-card.active {
      border-color: var(--blue);
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
    }

    .suite-mode-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .suite-mode-row strong,
    .suite-module strong {
      color: var(--text);
      font-size: 13px;
      line-height: 18px;
    }

    .suite-mode-row span,
    .suite-module span {
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    .suite-module-list {
      display: grid;
      gap: 10px;
      margin-top: 6px;
    }

    .suite-module {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
      background: var(--soft);
    }

    .suite-counter {
      display: inline-grid;
      grid-template-columns: 26px 28px 26px;
      align-items: center;
      min-height: 32px;
      border-radius: 8px;
      background: var(--card);
      overflow: hidden;
    }

    .suite-counter button {
      min-height: 32px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-weight: 850;
    }

    .suite-counter span {
      color: var(--text);
      text-align: center;
      font-size: 13px;
      font-weight: 850;
    }

    .suite-total {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .image-mode button,
    .image-choice,
    .image-template,
    .image-segmented button,
    .image-tab {
      min-height: 36px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: var(--card);
      color: var(--text);
      padding: 0 12px;
      font-weight: 700;
    }

    .image-mode button.active,
    .image-choice.active,
    .image-template.active,
    .image-segmented button.active,
    .image-tab.active {
      border-color: var(--green);
      background: rgba(16, 185, 129, 0.08);
      color: var(--green);
    }

    .image-template {
      text-align: left;
    }

    .image-form {
      display: grid;
      gap: 16px;
    }

    .image-field {
      display: grid;
      gap: 8px;
    }

    .image-field label,
    .image-section-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 18px;
    }

    .image-fields-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .image-field-wide {
      grid-column: 1 / -1;
    }

    .image-text-input,
    .image-small-textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 10px 11px;
      background: var(--card);
      color: var(--text);
      line-height: 20px;
    }

    .image-text-input {
      min-height: 38px;
    }

    .image-small-textarea {
      min-height: 76px;
      resize: vertical;
    }

    .suite-requirements {
      min-height: 146px;
      resize: none;
    }

    .image-prompt {
      width: 100%;
      min-height: 130px;
      resize: vertical;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 12px;
      background: var(--card);
      color: var(--text);
      line-height: 22px;
    }

    .image-upload {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px dashed var(--line-strong);
      border-radius: 8px;
      background: var(--soft);
    }

    .image-upload img {
      width: 100%;
      max-height: 220px;
      object-fit: contain;
      border-radius: 8px;
      background: var(--card);
      border: 1px solid var(--line);
    }

    .image-upload .product-reference-tile img {
      height: 100%;
      max-height: none;
      object-fit: cover;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .image-settings {
      display: grid;
      gap: 14px;
      position: sticky;
      top: 18px;
      max-height: calc(100vh - 36px);
      overflow: auto;
    }

    .image-settings .image-check-grid,
    .image-settings .image-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-action-bar {
      position: sticky;
      bottom: 0;
      z-index: 3;
      display: grid;
      gap: 10px;
      padding-top: 12px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card) 18px, var(--card));
    }

    .image-settings .btn.primary {
      width: 100%;
      min-height: 44px;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    }

    [data-theme="dark"] .image-action-bar {
      background: linear-gradient(to bottom, rgba(15, 23, 42, 0), var(--card) 18px, var(--card));
    }

    .image-setting-row {
      display: grid;
      gap: 8px;
    }

    .image-setting-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .image-setting-head .btn {
      min-height: 30px;
      padding: 0 10px;
      border-radius: 7px;
      font-size: 12px;
    }

    .image-select,
    .image-number {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 0 10px;
      background: var(--card);
      color: var(--text);
    }

    .image-select {
      padding-right: 34px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-position: right 14px center;
      background-repeat: no-repeat;
      background-size: 16px 16px;
    }

    .image-check {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 7px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--text);
      background: var(--soft);
      font-size: 13px;
      font-weight: 650;
    }

    .image-check input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .image-price-box {
      display: grid;
      gap: 6px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .image-price-box strong {
      font-size: 22px;
      line-height: 28px;
    }

    .image-output-card {
      display: grid;
      gap: 10px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
    }

    .image-preview {
      display: grid;
      place-items: center;
      min-height: 520px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      overflow: hidden;
      color: var(--faint);
      text-align: center;
    }

    .image-preview img {
      width: 100%;
      height: 100%;
      max-height: 520px;
      object-fit: contain;
      background: var(--card);
    }

    .image-task-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .image-task-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .image-task-item strong,
    .image-task-item span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .image-task-item span {
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    #images {
      max-width: 1280px;
    }

    #images [hidden] {
      display: none !important;
    }

    #images .image-workbench {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
      gap: 16px;
      align-items: start;
    }

    #images .image-main {
      display: grid;
      gap: 14px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    #images .image-canvas {
      position: relative;
      display: grid;
      place-items: center;
      min-height: clamp(430px, 54vh, 620px);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px),
        #f8fafb;
      background-size: 28px 28px;
    }

    [data-theme="dark"] #images .image-canvas {
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        #111827;
      background-size: 28px 28px;
    }

    #images .image-canvas-tools {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      display: flex;
      gap: 8px;
    }

    #images .image-icon-btn {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.88);
      color: var(--text);
      cursor: pointer;
    }

    #images .image-icon-btn:disabled {
      cursor: not-allowed;
      opacity: 0.42;
    }

    #images .image-icon-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #images .image-preview-card {
      display: grid;
      place-items: center;
      width: var(--image-preview-width, min(68%, 420px));
      max-width: calc(100% - 96px);
      max-height: calc(100% - 96px);
      aspect-ratio: var(--image-preview-aspect, 1 / 1);
      border: 0;
      border-radius: 8px;
      background: transparent;
      box-shadow: none;
      transition: width 180ms ease, aspect-ratio 180ms ease;
    }

    [data-theme="dark"] #images .image-preview-card {
      background: transparent;
      box-shadow: none;
    }

    #images .image-preview-card:empty {
      display: none;
    }

    #images .image-preview-card img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: inherit;
      object-fit: contain;
    }

    #images .image-preview-skeleton {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.28));
    }

    #images .image-preview-skeleton::before {
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.45) 42%, transparent 72%);
      animation: image-skeleton-sweep 1.25s linear infinite;
      content: "";
    }

    #images .image-preview-skeleton span {
      position: absolute;
      inset: 14%;
      border: 1px dashed rgba(100, 116, 139, 0.35);
      border-radius: 6px;
    }

    #images .image-canvas-status {
      position: absolute;
      left: 14px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.88);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    #images .image-canvas-status svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #images .image-bottom {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
      gap: 14px;
    }

    #images .image-asset-panel,
    #images .image-queue-panel {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
    }

    #images .image-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-height: 54px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    #images .image-panel-head h3 {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      line-height: 20px;
    }

    #images .image-panel-head p,
    #images .image-panel-head span {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    #images .image-asset-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      padding: 14px;
    }

    #images .image-empty-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    #images .image-empty-list {
      display: grid;
      place-items: center;
      min-height: 96px;
      padding: 18px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 400;
      text-align: center;
    }

    #images .image-thumb {
      display: grid;
      min-width: 0;
      overflow: hidden;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
    }

    #images .image-thumb.active {
      border-color: rgba(16, 185, 129, 0.48);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.04);
    }

    #images .image-thumb > div {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }

    #images .image-thumb-preview-wrap {
      position: relative;
      min-width: 0;
    }

    #images .image-thumb-preview {
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: var(--soft);
      cursor: pointer;
    }

    #images .image-thumb-delete {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      color: #64748b;
      opacity: 0;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
      cursor: pointer;
      transition: opacity 140ms ease, color 140ms ease, transform 140ms ease;
      transform: translateY(-2px);
      pointer-events: none;
    }

    #images .image-thumb:hover .image-thumb-delete,
    #images .image-thumb:focus-within .image-thumb-delete {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    #images .image-thumb-delete:hover {
      color: #334155;
    }

    #images .image-thumb-delete svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #images .image-thumb-preview:empty::before {
      width: 28px;
      height: 38px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: var(--card);
      content: "";
    }

    #images .image-thumb-skeleton {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      pointer-events: none;
    }

    #images .image-thumb-skeleton .image-thumb-preview,
    #images .image-thumb-skeleton strong,
    #images .image-thumb-skeleton span,
    #images .image-thumb-skeleton .image-thumb-actions span,
    #images .image-queue-skeleton strong,
    #images .image-queue-skeleton em,
    #images .image-queue-skeleton > span {
      position: relative;
      overflow: hidden;
      border-radius: 7px;
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.16));
      background-size: 220% 100%;
      animation: imageSkeletonPulse 1.15s ease-in-out infinite;
    }

    #images .image-thumb-skeleton .image-thumb-preview:empty::before {
      content: none;
    }

    #images .image-thumb-skeleton strong,
    #images .image-thumb-skeleton span {
      display: block;
      height: 12px;
    }

    #images .image-thumb-skeleton strong {
      width: 78%;
      margin-bottom: 6px;
    }

    #images .image-thumb-skeleton span {
      width: 52%;
    }

    #images .image-thumb-skeleton .image-thumb-actions span {
      display: block;
      width: 100%;
      height: 30px;
    }

    #images .image-thumb-preview img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #images .image-thumb strong,
    #images .image-thumb span {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #images .image-thumb strong {
      color: var(--text);
      font-size: 13px;
      line-height: 20px;
    }

    #images .image-thumb span {
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    #images .image-thumb-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    #images .image-thumb-download {
      display: inline-grid;
      place-items: center;
      width: 100%;
      height: 30px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(248, 250, 252, 0.72);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
    }

    #images .image-thumb-download:hover {
      background: var(--soft);
      color: var(--text);
    }

    #images .image-thumb-delete:disabled {
      cursor: wait;
      opacity: 0.64;
    }

    #images .image-load-more {
      display: block;
      width: min(260px, 100%);
      margin: 14px auto 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    #images .image-load-more:disabled {
      cursor: wait;
      opacity: 0.62;
    }

    #images .image-queue-list {
      display: grid;
      gap: 8px;
      padding: 12px;
    }

    #images .image-queue-item {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    #images .image-queue-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    #images .image-queue-head strong,
    #images .image-queue-item > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      line-height: 18px;
    }

    #images .image-queue-head strong {
      color: var(--text);
    }

    #images .image-queue-item > span {
      color: var(--muted);
    }

    #images .image-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 0 8px;
      border: 1px solid rgba(16, 185, 129, 0.28);
      border-radius: 999px;
      background: rgba(16, 185, 129, 0.08);
      color: var(--green-dark);
      font-size: 12px;
      font-style: normal;
      font-weight: 850;
      white-space: nowrap;
    }

    #images .image-status-pill.pending {
      border-color: var(--line-strong);
      background: var(--card);
      color: var(--muted);
    }

    #images .image-status-pill.done {
      border-color: rgba(37, 99, 235, 0.22);
      background: rgba(37, 99, 235, 0.07);
      color: var(--blue);
    }

    #images .image-queue-bar {
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--line);
    }

    #images .image-queue-bar span {
      display: block;
      width: var(--progress, 0%);
      height: 100%;
      border-radius: inherit;
      background: var(--green);
    }

    #images .image-queue-skeleton {
      pointer-events: none;
    }

    #images .image-queue-skeleton strong {
      width: 46%;
      height: 14px;
    }

    #images .image-queue-skeleton em {
      width: 52px;
      height: 22px;
    }

    #images .image-queue-skeleton > span {
      width: 68%;
      height: 12px;
    }

    #images .image-queue-skeleton .image-queue-bar span {
      width: 42%;
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.16));
      background-size: 220% 100%;
      animation: imageSkeletonPulse 1.15s ease-in-out infinite;
    }

    @keyframes imageSkeletonPulse {
      0% { background-position: 120% 0; }
      100% { background-position: -120% 0; }
    }

    #images .image-settings {
      position: sticky;
      top: 18px;
      display: grid;
      grid-template-rows: 64px minmax(0, 1fr) auto;
      gap: 0;
      max-height: calc(100vh - 36px);
      padding: 0;
      overflow: hidden;
    }

    #images .image-settings-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
    }

    #images .image-settings-head h2 {
      margin: 0;
      color: var(--text);
      font-size: 15px;
      line-height: 22px;
    }

    #images .image-settings-head span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    #images .image-settings-body {
      display: grid;
      gap: 14px;
      min-height: 0;
      padding: 14px 16px 16px;
      overflow: auto;
    }

    #images .image-settings-body::-webkit-scrollbar {
      width: 8px;
    }

    #images .image-settings-body::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: #cbd5e1;
      background-clip: content-box;
    }

    #images .image-mode-tabs,
    #images .image-template-grid,
    #images .image-chip-grid {
      display: grid;
      gap: 8px;
    }

    #images .image-mode-tabs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    #images .image-mode-tabs.triple {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #images .image-template-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #images .image-mode-tabs button,
    #images .image-template-grid button,
    #images .image-chip-grid button {
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: var(--card);
      color: var(--text);
      font-weight: 800;
      cursor: pointer;
    }

    #images .image-mode-tabs button,
    #images .image-chip-grid button {
      min-height: 34px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
    }

    #images .image-template-grid button {
      display: grid;
      align-content: start;
      gap: 4px;
      min-width: 0;
      min-height: 68px;
      padding: 10px;
      text-align: left;
    }

    #images .image-template-grid strong,
    #images .image-template-grid span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #images .image-template-grid strong {
      color: var(--text);
      font-size: 13px;
      line-height: 18px;
    }

    #images .image-template-grid span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      line-height: 16px;
    }

    #images .image-mode-tabs button.active,
    #images .image-template-grid button.active,
    #images .image-chip-grid button.active {
      border-color: var(--green);
      background: #fbfffd;
      color: var(--green-dark);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.04);
    }

    #images .image-mode-tabs button.active,
    #images .image-chip-grid button.active {
      border-color: transparent;
      background: var(--card);
      color: var(--text);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    #images .image-panel-section {
      display: grid;
      gap: 10px;
    }

    #images .image-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--text);
      font-size: 13px;
      font-weight: 850;
      line-height: 20px;
    }

    #images .image-label-row span:last-child {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    #images .image-platform-card {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    #images .image-platform-card strong {
      color: var(--text);
      font-size: 13px;
      line-height: 20px;
    }

    #images .image-platform-card span,
    #images .image-platform-card em {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
      line-height: 18px;
    }

    #images .image-upload {
      display: grid;
      place-items: center;
      min-height: 108px;
      padding: 14px;
      border: 1px dashed var(--line-strong);
      border-radius: 8px;
      background: var(--soft);
      color: var(--muted);
      text-align: center;
    }

    #images .image-upload.has-files {
      place-items: stretch;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
    }

    #images .product-upload-empty {
      aspect-ratio: 3 / 1;
      border: 1px dashed var(--line-strong);
      border-radius: 8px;
      background: var(--soft);
    }

    #images .product-reference-add {
      border: 1px dashed var(--line-strong);
      background: var(--soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    #images .image-select-grid,
    #images .image-output-row,
    #images .setting-grid,
    #images .inline-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    #images .setting-grid .wide {
      grid-column: 1 / -1;
    }

    #images .ratio-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    #images .custom-size-inputs {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      grid-column: 1 / -1;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    #images .custom-size-inputs[hidden] {
      display: none !important;
    }

    #images [data-custom-size-toggle] {
      grid-column: span 3;
    }

    #images .custom-size-inputs span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 18px;
      white-space: nowrap;
    }

    #images .settings-drawer {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      overflow: hidden;
    }

    #images .settings-drawer summary {
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 0 12px;
      color: var(--text);
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      list-style: none;
    }

    #images .settings-drawer summary::-webkit-details-marker {
      display: none;
    }

    #images .settings-drawer summary::after {
      content: "";
      width: 16px;
      height: 16px;
      margin-left: auto;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
      opacity: 0.6;
    }

    #images .settings-drawer[open] summary {
      border-bottom: 1px solid var(--line);
    }

    #images .drawer-content {
      display: grid;
      gap: 10px;
      padding: 12px;
    }

    #images .edit-control-group {
      display: grid;
      gap: 8px;
    }

    #images .edit-subtitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 850;
      line-height: 18px;
    }

    #images .edit-subtitle span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    #images .chip-grid,
    #images .checkbox-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    #images .chip-grid.two,
    #images .checkbox-grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #images .chip-grid button {
      width: 100%;
    }

    #images .checkbox-grid label {
      position: relative;
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      user-select: none;
    }

    #images .checkbox-grid input {
      appearance: none;
      display: inline-grid;
      place-items: center;
      width: 16px;
      height: 16px;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      background: var(--card);
      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
      cursor: pointer;
    }

    #images .checkbox-grid input::before {
      width: 10px;
      height: 10px;
      background: #ffffff;
      clip-path: polygon(14% 52%, 0 66%, 39% 100%, 100% 20%, 84% 8%, 36% 70%);
      content: "";
      opacity: 0;
      transform: scale(0.72);
      transition: opacity 120ms ease, transform 120ms ease;
    }

    #images .checkbox-grid input:checked {
      border-color: var(--green);
      background: var(--green);
      box-shadow: none;
    }

    #images .checkbox-grid input:checked::before {
      opacity: 1;
      transform: scale(1);
    }

    #images .checkbox-grid label:has(input:checked) {
      border-color: var(--green);
      background: #fbfffd;
      color: var(--green-dark);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.04);
    }

    #images .checkbox-grid label span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #images .range-control {
      display: grid;
      gap: 8px;
    }

    #images .range-control input {
      min-height: 24px;
      padding: 0;
      accent-color: var(--green);
    }

    #images .image-settings .image-edit-range {
      --range-value: 35%;
      appearance: none;
      width: 100%;
      height: 24px;
      border: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
    }

    #images .image-settings .image-edit-range:focus-visible {
      outline: 3px solid rgba(16, 185, 129, 0.09);
      outline-offset: 2px;
    }

    #images .image-settings .image-edit-range::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--green) 0 var(--range-value), var(--line-strong) var(--range-value) 100%);
    }

    #images .image-settings .image-edit-range::-webkit-slider-thumb {
      appearance: none;
      width: 16px;
      height: 16px;
      margin-top: -5px;
      border: 3px solid #ffffff;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    }

    #images .image-settings .image-edit-range::-moz-range-track {
      height: 6px;
      border-radius: 999px;
      background: var(--line-strong);
    }

    #images .image-settings .image-edit-range::-moz-range-progress {
      height: 6px;
      border-radius: 999px;
      background: var(--green);
    }

    #images .image-settings .image-edit-range::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border: 3px solid #ffffff;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    }

    #images .image-select,
    #images .image-number,
    #images .image-small-textarea,
    #images .image-prompt,
    #images .image-helper-textarea,
    #images .image-settings select,
    #images .image-settings input,
    #images .image-settings textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background-color: var(--card);
      color: var(--text);
    }

    #images .image-settings select,
    #images .image-settings input {
      min-height: 38px;
      padding: 0 10px;
    }

    #images .image-settings textarea {
      min-height: 130px;
      padding: 11px 12px;
      line-height: 22px;
      resize: vertical;
    }

    #images .image-settings select {
      padding-right: 32px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-position: right 10px center;
      background-repeat: no-repeat;
      background-size: 16px 16px;
    }

    #images .image-settings .checkbox-grid input[type="checkbox"] {
      appearance: none;
      display: inline-grid;
      place-items: center;
      width: 16px;
      min-width: 16px;
      max-width: 16px;
      height: 16px;
      min-height: 16px;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      background: var(--card);
      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
    }

    #images .image-settings .checkbox-grid input[type="checkbox"]:checked {
      border-color: var(--green);
      background: var(--green);
      box-shadow: none;
    }

    #images .ratio-grid button,
    #images .chip-grid button {
      min-height: 34px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
    }

    #images .ratio-grid button.active,
    #images .chip-grid button.active {
      border-color: var(--green);
      background: #fbfffd;
      color: var(--green-dark);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.04);
    }

    #images .image-small-textarea {
      min-height: 96px;
      resize: vertical;
    }

    #images .image-prompt {
      min-height: 112px;
    }

    #images .image-settings-foot {
      display: grid;
      gap: 10px;
      padding: 12px 16px 16px;
      border-top: 1px solid var(--line);
      background: var(--card);
    }

    #images .image-settings-foot .btn.primary {
      width: 100%;
      min-height: 44px;
    }

    #images [data-image-generate].generating {
      position: relative;
      overflow: hidden;
    }

    #images [data-image-generate].generating::before {
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.28) 45%, transparent 72%);
      animation: image-button-sweep 1s linear infinite;
      content: "";
    }

    @keyframes image-button-sweep {
      from { transform: translateX(-100%); }
      to { transform: translateX(100%); }
    }

    @keyframes image-skeleton-sweep {
      from { transform: translateX(-100%); }
      to { transform: translateX(100%); }
    }

    #images .image-price-box {
      padding: 12px;
    }

    #images .image-price-box strong {
      font-size: 20px;
      line-height: 26px;
    }

    @media (max-width: 980px) {
      #images .image-asset-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      #images .image-thumb {
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
      }

      #images .image-thumb-preview-wrap {
        width: 72px;
      }

      #images .image-thumb-preview {
        width: 72px;
        height: 72px;
        aspect-ratio: auto;
      }

      #images .image-thumb-actions {
        grid-column: 2;
        justify-content: flex-start;
      }

      #images .image-thumb-preview::before {
        width: 22px;
        height: 30px;
        border-radius: 7px;
      }
    }

    @media (max-width: 1180px) {
      #images .image-workbench {
        grid-template-columns: minmax(0, 1fr);
      }

      #images .image-settings {
        position: static;
        max-height: none;
      }
    }

    @media (max-width: 760px) {
      #images .image-bottom,
      #images .image-select-grid,
      #images .image-output-row,
      #images .setting-grid,
      #images .inline-fields,
      #images .ratio-grid,
      #images .custom-size-inputs {
        grid-template-columns: minmax(0, 1fr);
      }

      #images .image-asset-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      #images .image-template-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(17, 24, 39, 0.36);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .modal-backdrop.active {
      display: flex;
    }

    .modal-panel {
      width: min(480px, 100%);
      padding: 30px 32px 26px;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 24px 80px rgba(17, 24, 39, 0.24);
    }

    .modal-panel.key-created-panel {
      width: min(520px, 100%);
    }

    .modal-panel.human-check-panel {
      width: fit-content;
      max-width: calc(100vw - 32px);
      padding: 12px;
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(17, 24, 39, 0.22);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .modal-kicker {
      margin-bottom: 12px;
      color: var(--faint);
      font-size: 12px;
      font-weight: 800;
    }

    .modal-panel h2 {
      margin: 0;
      font-size: 28px;
      line-height: 1.18;
      font-weight: 760;
    }

    .modal-panel p {
      margin-top: 12px;
    }

    .human-check-widget {
      display: grid;
      min-width: 300px;
      min-height: 65px;
      place-items: center;
      overflow: hidden;
    }

    .human-check-widget:empty::before {
      content: "";
      width: 300px;
      height: 65px;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      background:
        radial-gradient(circle at 28px 22px, #cbd5e1 0 3px, transparent 3.5px),
        radial-gradient(circle at 28px 32px, #cbd5e1 0 3px, transparent 3.5px),
        radial-gradient(circle at 28px 42px, #cbd5e1 0 3px, transparent 3.5px),
        linear-gradient(90deg, #e2e8f0 0 76px, transparent 76px),
        linear-gradient(90deg, #f8fafc 0%, #eef2f7 40%, #f8fafc 80%);
      background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        120px 10px,
        240% 100%;
      background-position:
        0 0,
        0 0,
        0 0,
        62px 28px,
        100% 0;
      background-repeat: no-repeat;
      animation: human-check-skeleton 1.15s ease-in-out infinite;
    }

    @keyframes human-check-skeleton {
      0% {
        background-position: 0 0, 0 0, 0 0, 62px 28px, 100% 0;
      }
      100% {
        background-position: 0 0, 0 0, 0 0, 62px 28px, -100% 0;
      }
    }

    .human-check-status {
      min-height: 18px;
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      text-align: left;
    }

    .modal-notice {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 18px;
      padding: 12px 14px;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      background: #f0fdf4;
      color: #047857;
      font-size: 13px;
      font-weight: 650;
    }

    .modal-secret {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 18px;
      padding: 16px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: var(--soft);
    }

    .modal-secret code {
      flex: 1;
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      line-height: 21px;
      overflow-wrap: anywhere;
      white-space: normal;
    }

    .modal-field {
      display: grid;
      gap: 8px;
      margin-top: 24px;
    }

    .modal-field label {
      color: var(--faint);
      font-size: 12px;
      font-weight: 800;
    }

    .modal-field input {
      width: 100%;
      min-height: 43px;
      padding: 0 14px;
      border: 1px solid #111827;
      border-radius: 8px;
      font: inherit;
      outline: none;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 22px;
    }

    .profile-card {
      display: grid;
      gap: 14px;
    }

    .profile-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 14px;
    }

    .profile-panel {
      padding: 24px;
    }

    .profile-account-card {
      padding: 30px 24px 24px;
      overflow: hidden;
    }

    .profile-account-row {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr) 220px;
      align-items: center;
      gap: 28px;
      min-height: 72px;
      padding: 20px 0;
      border-bottom: 1px solid var(--line);
    }

    .profile-account-row:last-child {
      border-bottom: 0;
    }

    .profile-account-label {
      color: var(--faint);
      font-size: 12px;
      font-weight: 700;
    }

    .profile-account-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .profile-account-note {
      color: var(--faint);
      font-size: 12px;
      font-weight: 700;
      text-align: right;
    }

    .profile-name-input {
      width: min(100%, 260px);
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: #ffffff;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      outline: none;
    }

    .profile-name-input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.06);
    }

    .profile-locked {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      color: var(--faint);
      font-size: 12px;
      font-weight: 700;
    }

    .profile-locked .icon,
    .profile-inline-copy .icon {
      width: 13px;
      height: 13px;
    }

    .profile-inline-copy {
      width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--faint);
    }

    .profile-inline-copy:hover {
      color: var(--green);
      background: var(--soft);
    }

    .profile-hero {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
    }

    .profile-avatar {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 999px;
      background: var(--green);
      color: #ffffff;
      font-size: 24px;
      font-weight: 850;
    }

    .profile-account-main .profile-avatar {
      width: 64px;
      height: 64px;
      font-size: 26px;
      font-weight: 700;
    }

    .profile-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .profile-actions {
      display: flex;
      gap: 10px;
    }

    .profile-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .profile-list {
      display: grid;
      gap: 2px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .profile-list .profile-row {
      padding: 12px 0;
    }

    .profile-list .profile-row + .profile-row {
      border-top: 1px solid var(--line);
    }

    .security-list,
    .preference-list {
      display: grid;
      gap: 12px;
    }

    .security-item,
    .preference-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    .security-item p,
    .preference-item p {
      margin-top: 4px;
    }

    .profile-mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .doc-layout {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      gap: 16px;
    }

    .toc {
      position: sticky;
      top: 24px;
      align-self: start;
      padding: 12px;
    }

    .toc a {
      display: block;
      padding: 8px 10px;
      border-radius: 6px;
      color: var(--muted);
      font-weight: 700;
      text-decoration: none;
    }

    .toc a:hover {
      background: var(--soft);
      color: var(--text);
    }

    .doc-card {
      display: grid;
      gap: 16px;
    }

    .doc-step {
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .doc-step:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .doc-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .doc-summary {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    .doc-summary strong,
    .doc-summary span {
      display: block;
    }

    .doc-summary span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
      line-height: 20px;
    }

    .doc-note {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid #c8f4dc;
      border-radius: var(--radius);
      background: #f6fffa;
      color: var(--muted);
      line-height: 22px;
    }

    .doc-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .doc-list-item {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 12px;
      padding: 12px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      line-height: 22px;
    }

    .doc-list-item strong {
      color: var(--text);
    }

    .endpoint-grid {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .endpoint-row {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
    }

    .endpoint-row code {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .code-block {
      margin-top: 10px;
      padding: 12px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #0f172a;
      color: #e5e7eb;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 20px;
    }

    .register-page {
      max-width: none;
    }

    .register-landing {
      --register-bg: #f7f8f7;
      --register-card: #ffffff;
      --register-ink: #111512;
      --register-soft: #3d4842;
      --register-muted: #6e7a73;
      --register-line: #dfe7e1;
      --register-line-strong: #c7d5cc;
      --register-accent: #059669;
      --register-accent-dark: #047857;
      min-height: 100dvh;
      margin: -42px -48px -70px;
      padding: 26px 48px 0;
      background: linear-gradient(180deg, #fbfcfb 0%, var(--register-bg) 58%, #eef4f0 100%);
      color: var(--register-ink);
    }

    .register-shell {
      width: min(1180px, 100%);
      margin: 0 auto;
    }

    .register-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      min-height: 64px;
      margin-bottom: 56px;
      border-bottom: 1px solid var(--register-line);
    }

    .register-brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--register-ink);
      font-size: 18px;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
    }

    .register-brand .logo-mark {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--register-accent);
    }

    .register-brand .logo-mark::before {
      left: 9px;
      top: 9px;
    }

    .register-brand .logo-mark::after {
      left: 12px;
      top: 7px;
    }

    .register-brand em {
      color: var(--register-accent);
      font-style: normal;
    }

    .register-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      min-width: 0;
    }

    .register-nav a,
    .register-text-link {
      color: var(--register-soft);
      font-weight: 750;
      text-decoration: none;
    }

    .register-nav a:hover,
    .register-text-link:hover,
    .signup-foot a:hover {
      color: var(--register-ink);
    }

    .register-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .register-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
      align-items: center;
      gap: 70px;
      padding-bottom: 46px;
    }

    .register-copy {
      min-width: 0;
    }

    .register-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      margin-bottom: 26px;
      padding: 5px 13px;
      border: 1px solid #b7e6ce;
      border-radius: 999px;
      background: #effaf4;
      color: var(--register-accent-dark);
      font-size: 13px;
      font-weight: 800;
    }

    .register-badge::before {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--register-accent);
      content: "";
    }

    .register-title {
      display: grid;
      gap: 8px;
      max-width: 690px;
      margin-bottom: 24px;
      color: var(--register-ink);
      font-size: 64px;
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: 0;
    }

    .register-title-line {
      display: block;
    }

    .register-typewriter {
      display: inline-flex;
      align-items: baseline;
      min-height: 1.08em;
      white-space: nowrap;
    }

    .register-title em {
      color: var(--register-accent);
      font-style: normal;
    }

    [data-typewriter-rest]:not(:empty) {
      margin-left: 0.18em;
    }

    .typewriter-caret {
      display: inline-block;
      width: 0.08em;
      height: 0.86em;
      margin-left: 0.08em;
      border-radius: 999px;
      background: var(--register-ink);
      animation: caretBlink 900ms steps(1, end) infinite;
      transform: translateY(0.08em);
    }

    @keyframes caretBlink {
      0%,
      45% {
        opacity: 1;
      }

      46%,
      100% {
        opacity: 0;
      }
    }

    .register-sub {
      max-width: 600px;
      margin-bottom: 30px;
      color: var(--register-soft);
      font-size: 18px;
      line-height: 30px;
      overflow-wrap: anywhere;
    }

    .register-cta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 18px;
      margin-bottom: 34px;
    }

    .signup-anchor,
    .signup-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      border-radius: var(--radius);
      background: var(--register-ink);
      color: #ffffff;
      font-weight: 850;
      text-decoration: none;
      transition: transform 160ms ease, background 160ms ease;
    }

    .signup-anchor {
      padding: 0 18px;
    }

    .signup-anchor:hover,
    .signup-submit:hover {
      background: #1f2923;
    }

    .signup-anchor:active,
    .signup-submit:active,
    .register-feature-card:active {
      transform: translateY(1px);
    }

    .register-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      max-width: 760px;
      margin: 0;
      border: 1px solid var(--register-line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.68);
    }

    .register-meta div {
      min-width: 0;
      padding: 16px 18px;
    }

    .register-meta div + div {
      border-left: 1px solid var(--register-line);
    }

    .register-meta dt,
    .register-meta dd {
      margin: 0;
    }

    .register-meta dt {
      margin-bottom: 6px;
      color: var(--register-muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 18px;
    }

    .register-meta dd {
      overflow: hidden;
      color: var(--register-ink);
      font-size: 14px;
      font-weight: 850;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .signup-card {
      align-self: center;
      min-height: 0;
      padding: 28px;
      border: 1px solid var(--register-line-strong);
      border-radius: var(--radius);
      background: var(--register-card);
      box-shadow: 0 22px 60px rgba(18, 40, 28, 0.12);
    }

    .signup-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 28px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--register-line);
      color: var(--register-muted);
      font-size: 12px;
      font-weight: 800;
    }

    .signup-card-top strong {
      color: var(--register-accent-dark);
      font-family: var(--mono);
      font-size: 12px;
    }

    .signup-head {
      margin-bottom: 26px;
    }

    .signup-head h2 {
      margin-bottom: 7px;
      color: var(--register-ink);
      font-size: 24px;
      line-height: 30px;
    }

    .signup-head p {
      color: var(--register-muted);
      font-size: 14px;
      line-height: 22px;
    }

    .signup-form {
      display: grid;
      gap: 16px;
    }

    .signup-field {
      display: grid;
      gap: 7px;
    }

    .signup-field label {
      color: var(--register-soft);
      font-size: 12px;
      font-weight: 800;
    }

    .signup-field label span {
      color: var(--register-muted);
      font-weight: 650;
    }

    .signup-field.optional {
      gap: 7px;
      margin-top: 0;
    }

    .signup-field.optional label {
      color: var(--register-muted);
      font-weight: 700;
    }

    .signup-input.optional {
      border-color: var(--register-line);
      border-style: solid;
      background: #fbfcfb;
      color: var(--register-soft);
      font-size: 14px;
    }

    .signup-input.optional:focus {
      border-style: solid;
      background: #ffffff;
    }

    .signup-input {
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid var(--register-line-strong);
      border-radius: var(--radius);
      background: #f8faf8;
      color: var(--register-ink);
      outline: 0;
    }

    .signup-input:focus {
      border-color: var(--register-accent);
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
    }

    .signup-input::placeholder {
      color: #9aa59e;
    }

    .signup-submit {
      width: 100%;
      border: 0;
    }

    .email-pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      margin-top: 8px;
      padding: 3px 9px;
      border-radius: 6px;
      background: var(--register-warm);
      color: var(--register-ink);
      font-family: var(--mono);
      font-size: 12px;
    }

    .otp-cells {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) 18px repeat(3, minmax(0, 1fr));
      align-items: center;
      gap: 8px;
      max-width: 390px;
      margin: 18px auto 14px;
    }

    .otp-separator {
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: #d1d5db;
    }

    .otp-cells input {
      width: 100%;
      min-width: 0;
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid var(--register-line);
      border-radius: var(--radius);
      background: var(--register-warm);
      color: var(--register-ink);
      font-size: 22px;
      font-weight: 800;
      text-align: center;
    }

    .otp-cells input:focus {
      border-color: var(--register-ink);
      background: #ffffff;
      outline: 0;
    }

    .verify-hero {
      grid-template-columns: minmax(0, 500px);
      justify-content: center;
      align-items: start;
      gap: 0;
      padding-top: 58px;
      padding-bottom: 96px;
    }

    .verify-card {
      align-self: start;
      width: 100%;
    }

    .verify-card .signup-submit {
      width: 100%;
    }

    .verify-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .verify-back {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      margin-left: -8px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      color: var(--register-soft);
    }

    .verify-back:hover {
      border-color: var(--register-line);
      background: var(--register-warm);
      color: var(--register-ink);
    }

    .verify-secondary {
      width: 100%;
      margin-top: 12px;
      border: 0;
      background: transparent;
      text-decoration: underline;
      text-decoration-color: #d1d5db;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .verify-secondary:disabled {
      cursor: not-allowed;
      color: var(--register-muted);
      background: transparent;
    }

    .signup-foot {
      margin-top: 16px;
      color: var(--register-muted);
      font-size: 12px;
      line-height: 19px;
      text-align: center;
    }

    .signup-foot a {
      color: var(--register-soft);
      text-decoration: underline;
      text-decoration-color: var(--register-line);
      text-underline-offset: 2px;
    }

    .register-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-bottom: 70px;
      border-top: 1px solid var(--register-line);
      border-bottom: 1px solid var(--register-line);
      background: var(--register-line);
    }

    .register-proof div {
      min-width: 0;
      padding: 22px;
      background: rgba(255, 255, 255, 0.62);
    }

    .register-proof strong,
    .register-proof span {
      display: block;
    }

    .register-proof strong {
      margin-bottom: 7px;
      color: var(--register-ink);
      font-size: 14px;
      line-height: 20px;
    }

    .register-proof span {
      color: var(--register-soft);
      font-size: 13px;
      line-height: 21px;
    }

    .register-flow,
    .register-capabilities {
      margin: 0 -48px;
      padding: 74px 48px;
      border-top: 1px solid var(--register-line);
    }

    .register-flow {
      background: #ffffff;
    }

    .register-capabilities {
      margin-bottom: 0;
      padding-bottom: 90px;
      background: #eef4f0;
    }

    .register-section-head {
      max-width: 700px;
      margin-bottom: 34px;
    }

    .register-section-head h2 {
      margin-bottom: 12px;
      color: var(--register-ink);
      font-size: 38px;
      font-weight: 850;
      line-height: 44px;
    }

    .register-section-head p {
      color: var(--register-soft);
      font-size: 16px;
      line-height: 26px;
    }

    .register-flow-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid var(--register-line);
      border-radius: var(--radius);
      background: var(--register-line);
      overflow: hidden;
    }

    .register-flow-step {
      min-width: 0;
      padding: 26px;
      background: #ffffff;
    }

    .register-flow-step span {
      display: block;
      margin-bottom: 42px;
      color: var(--register-accent);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      line-height: 18px;
    }

    .register-flow-step h3 {
      margin-bottom: 9px;
      color: var(--register-ink);
      font-size: 17px;
      line-height: 24px;
    }

    .register-flow-step p {
      color: var(--register-soft);
      font-size: 14px;
      line-height: 23px;
    }

    .register-capability-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
      gap: 22px;
      align-items: stretch;
    }

    .register-api-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-width: 0;
      min-height: 390px;
      padding: 26px;
      border: 1px solid #d3ded6;
      border-radius: var(--radius);
      background: #101713;
      color: #f5fbf7;
      box-shadow: 0 22px 60px rgba(18, 40, 28, 0.14);
    }

    .register-panel-head {
      display: grid;
      gap: 8px;
      margin-bottom: 46px;
    }

    .register-panel-head span {
      color: #92b7a4;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
    }

    .register-panel-head strong {
      overflow-wrap: anywhere;
      color: #ffffff;
      font-size: 26px;
      line-height: 34px;
    }

    .register-api-panel pre {
      align-self: end;
      margin: 0;
      padding: 18px;
      overflow-x: auto;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.06);
      color: #d8f7e8;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 22px;
    }

    .register-feature-list {
      display: grid;
      gap: 12px;
    }

    .register-feature-card {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      min-width: 0;
      padding: 22px;
      border: 1px solid var(--register-line);
      border-radius: var(--radius);
      background: #ffffff;
      transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .register-feature-card:hover {
      border-color: var(--register-line-strong);
      box-shadow: 0 12px 28px rgba(18, 40, 28, 0.08);
      transform: translateY(-1px);
    }

    .register-feature-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 0;
      border-radius: var(--radius);
      background: #edf8f2;
      color: var(--register-accent);
    }

    .register-feature-card h3 {
      margin-bottom: 7px;
      color: var(--register-ink);
      font-size: 17px;
      line-height: 24px;
    }

    .register-feature-card p {
      color: var(--register-soft);
      font-size: 14px;
      line-height: 23px;
      overflow-wrap: anywhere;
    }

    @media (prefers-reduced-motion: reduce) {
      .typewriter-caret {
        animation: none;
      }

      .signup-anchor,
      .signup-submit,
      .register-feature-card {
        transition: none;
      }
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 50;
      max-width: min(360px, calc(100vw - 44px));
      padding: 11px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      color: var(--text);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 160ms ease, transform 160ms ease;
      pointer-events: none;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .tg-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: #28a7e8;
      color: #ffffff;
      font-weight: 800;
    }

    body.auth-flow .tg-float {
      display: none;
    }

    .register-refined {
      --register-bg: #fbfcfb;
      --register-card: #ffffff;
      --register-ink: #121714;
      --register-soft: #4b5650;
      --register-muted: #7a867f;
      --register-line: #e2e8e3;
      --register-line-strong: #cbd8cf;
      --register-accent: #058765;
      --register-accent-dark: #046c52;
      margin: -42px -48px -70px;
      padding: 26px 48px 82px;
      background:
        linear-gradient(90deg, rgba(226, 232, 227, 0.62) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff 0%, var(--register-bg) 100%);
      background-size: 72px 100%, 100% 100%;
      color: var(--register-ink);
    }

    .register-refined .register-shell {
      width: min(1080px, 100%);
    }

    .register-refined .register-header {
      grid-template-columns: auto minmax(0, 1fr) auto;
      min-height: 58px;
      margin-bottom: 72px;
      border-bottom-color: var(--register-line);
    }

    .register-refined .register-nav {
      justify-content: center;
      gap: 26px;
      font-size: 13px;
    }

    .register-hero-refined {
      grid-template-columns: minmax(0, 1fr) 380px;
      align-items: start;
      gap: 86px;
      padding-bottom: 82px;
    }

    .register-copy-refined {
      padding-top: 14px;
    }

    .register-refined .register-badge {
      margin-bottom: 24px;
      border-color: var(--register-line-strong);
      background: rgba(255, 255, 255, 0.74);
      color: var(--register-soft);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
    }

    .register-refined .register-badge::before {
      background: var(--register-accent);
    }

    .register-refined .register-title {
      display: block;
      max-width: 720px;
      margin-bottom: 24px;
      font-size: 60px;
      font-weight: 880;
      line-height: 1.06;
      letter-spacing: 0;
    }

    .register-refined .register-sub {
      max-width: 620px;
      margin-bottom: 38px;
      color: var(--register-soft);
      font-size: 18px;
      line-height: 31px;
    }

    .register-meta-refined {
      max-width: 650px;
      grid-template-columns: 1.08fr 0.92fr;
      background: rgba(255, 255, 255, 0.52);
    }

    .signup-card-refined {
      padding: 26px;
      border-color: var(--register-line);
      box-shadow: 0 18px 44px rgba(25, 44, 32, 0.08);
    }

    .signup-card-refined .signup-card-top {
      margin-bottom: 24px;
    }

    .signup-card-refined .signup-head {
      margin-bottom: 24px;
    }

    .signup-card-refined .signup-head h2 {
      font-size: 22px;
      line-height: 28px;
    }

    .register-method,
    .register-control {
      border-top: 1px solid var(--register-line);
      padding-top: 58px;
    }

    .register-method {
      padding-bottom: 64px;
    }

    .register-refined .register-section-head {
      max-width: 560px;
      margin-bottom: 28px;
    }

    .register-refined .register-section-head h2,
    .register-control h2 {
      margin-bottom: 10px;
      color: var(--register-ink);
      font-size: 32px;
      font-weight: 850;
      line-height: 39px;
    }

    .register-refined .register-section-head p,
    .register-control p {
      color: var(--register-soft);
      font-size: 15px;
      line-height: 25px;
    }

    .register-method-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 18px;
      align-items: stretch;
    }

    .register-endpoint-panel {
      display: grid;
      align-content: space-between;
      min-height: 270px;
      padding: 28px;
      border: 1px solid var(--register-line);
      border-radius: var(--radius);
      background: #121714;
      color: #f5fbf7;
    }

    .register-endpoint-panel span {
      color: #8fb5a2;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
    }

    .register-endpoint-panel strong {
      overflow-wrap: anywhere;
      font-size: 30px;
      line-height: 38px;
    }

    .register-endpoint-panel pre {
      margin: 0;
      padding: 14px;
      overflow-x: auto;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.06);
      color: #dbf7e9;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 20px;
    }

    .register-steps {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      border: 1px solid var(--register-line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.72);
      list-style: none;
    }

    .register-steps li {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 14px;
      padding: 22px;
    }

    .register-steps li + li {
      border-top: 1px solid var(--register-line);
    }

    .register-steps span {
      color: var(--register-accent);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
    }

    .register-steps strong {
      display: block;
      grid-column: 2;
      margin-bottom: 5px;
      color: var(--register-ink);
      font-size: 15px;
      line-height: 22px;
    }

    .register-steps p {
      grid-column: 2;
      margin: 0;
      color: var(--register-soft);
      font-size: 13px;
      line-height: 21px;
    }

    .register-control {
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
      gap: 70px;
    }

    .register-control-list {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--register-line);
    }

    .register-control-list article {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 22px;
      padding: 20px 0;
      border-bottom: 1px solid var(--register-line);
    }

    .register-control-list h3 {
      color: var(--register-ink);
      font-size: 15px;
      line-height: 22px;
    }

    .register-control-list p {
      margin: 0;
      color: var(--register-soft);
      font-size: 14px;
      line-height: 23px;
    }

    .landing-home-page {
      --landing-ink: #101318;
      --landing-soft: #59616d;
      --landing-muted: #8a929f;
      --landing-line: rgba(16, 19, 24, 0.08);
      --landing-accent: #20ad84;
      --landing-accent-strong: #0f7f64;
      --landing-mx: 50%;
      --landing-my: 42%;
      --landing-rx: 0deg;
      --landing-ry: 0deg;
      --landing-shift-x: 0px;
      --landing-shift-y: 0px;
      --landing-back-rx: 0deg;
      --landing-back-ry: 0deg;
      --landing-back-shift-x: 0px;
      --landing-back-shift-y: 0px;
      --landing-pixel-opacity: 0.42;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background:
        linear-gradient(180deg, #fbfffd 0%, #eefbf8 48%, #fbfbf5 100%);
      color: var(--landing-ink);
    }

    .landing-home-page::before,
    .landing-home-page::after {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      content: "";
    }

    .landing-home-page::before {
      background:
        radial-gradient(ellipse at var(--landing-mx) var(--landing-my), rgba(255, 255, 255, 0.54) 0%, rgba(68, 216, 189, 0.14) 34%, transparent 68%),
        linear-gradient(112deg, transparent 5%, rgba(36, 201, 169, 0.13) 24%, rgba(91, 206, 228, 0.12) 46%, rgba(255, 207, 166, 0.1) 64%, transparent 86%);
      filter: blur(30px) saturate(112%);
      opacity: 0.72;
      transform: perspective(900px) translate3d(var(--landing-shift-x), var(--landing-shift-y), 0) rotateX(var(--landing-rx)) rotateY(var(--landing-ry)) scale(1.16);
      transform-origin: center;
      transition: transform 120ms ease-out;
      animation: landingFallbackFlow 18s ease-in-out infinite alternate;
    }

    .landing-home-page::after {
      background:
        linear-gradient(90deg, rgba(14, 127, 99, 0.024) 1px, transparent 1px),
        linear-gradient(180deg, rgba(14, 127, 99, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.18) 38%, transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0.68) 100%);
      background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
      opacity: 0.62;
      transform: perspective(900px) translate3d(var(--landing-back-shift-x), var(--landing-back-shift-y), 0) rotateX(var(--landing-back-rx)) rotateY(var(--landing-back-ry)) scale(1.02);
      transform-origin: center;
      transition: transform 120ms ease-out;
    }

    .landing-flow-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: var(--landing-pixel-opacity);
      filter: saturate(112%) contrast(1.04);
      image-rendering: pixelated;
      transform: perspective(900px) translate3d(var(--landing-shift-x), var(--landing-shift-y), 0) rotateX(var(--landing-rx)) rotateY(var(--landing-ry)) scale(1.035);
      transform-origin: center;
      transition: transform 120ms ease-out, opacity 160ms ease;
    }

    @keyframes landingFallbackFlow {
      0% {
        transform: perspective(900px) translate3d(-1.8%, -1.1%, 0) translate3d(var(--landing-shift-x), var(--landing-shift-y), 0) rotateX(var(--landing-rx)) rotateY(var(--landing-ry)) scale(1.16);
      }

      100% {
        transform: perspective(900px) translate3d(1.8%, 1.1%, 0) translate3d(var(--landing-shift-x), var(--landing-shift-y), 0) rotateX(var(--landing-rx)) rotateY(var(--landing-ry)) scale(1.16);
      }
    }

    @keyframes landingHeroRibbon {
      0% {
        transform: translate3d(-2.4%, -1.4%, 0) skewY(-3deg);
        opacity: 0.7;
      }

      100% {
        transform: translate3d(2.4%, 1.2%, 0) skewY(-3deg);
        opacity: 0.86;
      }
    }

    @keyframes landingEntrySweep {
      0%,
      58% {
        transform: translateX(-118%) rotate(-14deg);
      }

      100% {
        transform: translateX(118%) rotate(-14deg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .landing-home-page::before,
      .landing-home-page::after,
      .landing-home-hero::before,
      .landing-home-entry::before {
        animation: none;
      }
    }

    .landing-home-shell {
      position: relative;
      z-index: 1;
      display: grid;
      width: min(1180px, 100%);
      min-height: calc(100dvh - 54px);
      margin: 0 auto;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .landing-home-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      min-height: 76px;
      border-bottom: 0;
    }

    .landing-home-nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 28px;
      min-width: 0;
    }

    .landing-home-nav a {
      color: var(--landing-muted);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: color 160ms ease;
    }

    .landing-home-nav a:hover {
      color: var(--landing-ink);
    }

    .landing-home-header-action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .landing-home-login,
    .landing-home-entry {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(16, 19, 24, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      color: var(--landing-ink);
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 12px 34px rgba(16, 19, 24, 0.055);
      transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .landing-home-login {
      min-width: 86px;
      min-height: 40px;
      padding: 0 20px;
      font-size: 13px;
    }

    .landing-home-login:hover,
    .landing-home-entry:hover {
      border-color: rgba(16, 19, 24, 0.26);
      background: #ffffff;
      box-shadow: 0 16px 42px rgba(16, 19, 24, 0.08);
      transform: translateY(-1px);
    }

    .landing-home-login:active,
    .landing-home-entry:active {
      transform: translateY(0);
    }

    .landing-home-hero {
      position: relative;
      display: grid;
      place-items: center;
      padding: 46px 0 36px;
    }

    .landing-home-hero::before {
      position: absolute;
      inset: 6% -8% auto;
      height: min(460px, 56vh);
      z-index: 0;
      background:
        radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.34) 34%, transparent 70%),
        radial-gradient(ellipse at 36% 44%, rgba(32, 173, 132, 0.14) 0%, transparent 64%),
        radial-gradient(ellipse at 68% 46%, rgba(48, 189, 196, 0.12) 0%, transparent 66%);
      content: "";
      filter: blur(12px);
      opacity: 0.86;
      pointer-events: none;
      animation: landingHeroRibbon 16s ease-in-out infinite alternate;
    }

    .landing-home-copy {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      align-content: center;
      width: min(900px, 100%);
      text-align: center;
    }

    .landing-home-kicker,
    .register-home-kicker {
      margin: 0 0 18px;
      color: var(--landing-muted);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .landing-home-hero h1 {
      max-width: none;
      margin: 0 0 22px;
      color: var(--landing-ink);
      font-family: "Segoe UI Variable Display", "Aptos Display", "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
      font-size: 80px;
      font-weight: 720;
      line-height: 1.02;
    }

    .landing-home-title-line {
      display: block;
    }

    .landing-home-title-line:first-child {
      color: #111820;
      font-weight: 740;
    }

    .landing-home-title-line + .landing-home-title-line {
      margin-top: 14px;
      background: linear-gradient(90deg, #111820 0%, #173b32 52%, var(--landing-accent-strong) 100%);
      color: transparent;
      font-size: 0.74em;
      font-weight: 650;
      -webkit-background-clip: text;
      background-clip: text;
    }

    .landing-home-sub {
      max-width: 42ch;
      margin: 0;
      color: var(--landing-soft);
      font-size: 20px;
      line-height: 33px;
    }

    .landing-home-entry {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      gap: 18px;
      min-height: 64px;
      margin-top: 42px;
      padding: 0 10px 0 32px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(96deg, #11151c 0%, #12251f 58%, #118060 100%);
      border-color: rgba(17, 128, 96, 0.56);
      color: #ffffff;
      font-size: 16px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -12px 24px rgba(0, 0, 0, 0.18),
        0 24px 54px rgba(15, 127, 100, 0.28),
        0 0 0 7px rgba(32, 173, 132, 0.08);
    }

    .landing-home-entry > span {
      position: relative;
      z-index: 1;
    }

    .landing-home-entry::before {
      position: absolute;
      inset: -60% -80%;
      z-index: 0;
      background: linear-gradient(90deg, transparent 36%, rgba(255, 255, 255, 0.3) 50%, transparent 64%);
      content: "";
      pointer-events: none;
      transform: translateX(-118%) rotate(-14deg);
      animation: landingEntrySweep 4.2s ease-in-out infinite;
    }

    .landing-home-entry::after {
      position: absolute;
      inset: 1px;
      z-index: -1;
      border-radius: inherit;
      border: 1px solid rgba(255, 255, 255, 0.08);
      content: "";
      pointer-events: none;
    }

    .landing-home-entry-icon {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.1);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 10px 22px rgba(0, 0, 0, 0.16);
      color: #ffffff;
      font-size: 20px;
      line-height: 1;
      transform: translateX(0);
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .landing-home-entry:hover {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(96deg, #121820 0%, #143027 52%, #15956f 100%);
      border-color: rgba(21, 149, 111, 0.78);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -12px 24px rgba(0, 0, 0, 0.2),
        0 28px 62px rgba(15, 127, 100, 0.34),
        0 0 0 8px rgba(32, 173, 132, 0.12);
    }

    .landing-home-entry:hover .landing-home-entry-icon {
      border-color: rgba(255, 255, 255, 0.34);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.14);
      transform: translateX(2px);
    }

    .landing-home-footer {
      display: grid;
      align-items: center;
      justify-items: center;
      align-content: center;
      gap: 8px;
      min-height: 82px;
      border-top: 0;
      color: var(--landing-muted);
      font-size: 12px;
      text-align: center;
    }

    .landing-home-footer p {
      color: #8b8078;
      font-size: 13px;
      line-height: 21px;
    }

    .landing-home-footer-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: #15120f;
      font-size: 14px;
      font-weight: 800;
      line-height: 20px;
    }

    .landing-home-footer-links span {
      color: #8b8078;
      font-weight: 600;
    }

    .landing-home-footer-links button {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font-weight: inherit;
      cursor: pointer;
      transition: color 160ms ease;
    }

    .landing-home-footer-links button:hover {
      color: var(--landing-ink);
    }

    .register-landing-auth {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top left, rgba(12, 138, 103, 0.08), transparent 34%),
        radial-gradient(circle at right 18%, rgba(78, 122, 255, 0.08), transparent 26%),
        linear-gradient(180deg, #fcfdfd 0%, #f4f7f6 100%);
    }

    .register-landing-auth::before {
      position: absolute;
      inset: 0;
      pointer-events: none;
      content: "";
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 30%);
    }

    .register-auth-shell {
      position: relative;
      z-index: 1;
      display: grid;
      width: min(1160px, 100%);
      min-height: calc(100dvh - 54px);
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .register-auth-header {
      min-height: 60px;
      margin-bottom: 0;
      border-bottom: 0;
    }

    .register-auth-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      align-items: center;
      gap: clamp(42px, 7vw, 92px);
      padding: 52px 0 36px;
    }

    .register-auth-copy {
      display: grid;
      align-content: center;
      justify-items: start;
      min-width: 0;
    }

    .register-auth-hero h1 {
      max-width: 620px;
      margin: 0 0 18px;
      color: #111917;
      font-size: clamp(44px, 5vw, 72px);
      font-weight: 860;
      line-height: 1.04;
    }

    .register-auth-hero p {
      max-width: 460px;
      margin: 0;
      color: var(--register-soft);
      font-size: 18px;
      line-height: 30px;
    }

    .register-auth-card {
      border-color: rgba(17, 25, 23, 0.08);
      box-shadow: 0 24px 56px rgba(26, 41, 37, 0.08);
    }

    @media (max-width: 860px) {
      .landing-home-page {
        margin: -24px -16px -60px;
        padding: 16px 16px 24px;
      }

      .landing-home-page::before,
      .landing-home-page::after {
        inset: 0;
      }

      .landing-home-page::after {
        background-size: 220px 100%, 100% 100%;
      }

      .landing-home-shell {
        min-height: calc(100dvh - 44px);
      }

      .landing-home-header {
        gap: 18px;
        min-height: 68px;
      }

      .landing-home-hero {
        padding: 44px 0 28px;
      }

      .landing-home-hero h1 {
        font-size: 68px;
      }

      .landing-home-sub {
        max-width: 32ch;
        font-size: 18px;
        line-height: 30px;
      }

      .landing-home-footer {
        min-height: 64px;
      }

    }

    @media (max-width: 640px) {
      .landing-home-page {
        padding-bottom: 22px;
      }

      .landing-home-page::before,
      .landing-home-page::after {
        inset: 0;
      }

      .landing-home-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        min-height: 68px;
      }

      .landing-home-header .register-brand {
        min-width: 0;
        gap: 8px;
        font-size: 17px;
      }

      .landing-home-header .register-brand .logo-mark {
        width: 28px;
        height: 28px;
        border-radius: 8px;
      }

      .landing-home-header .register-brand .logo-mark::before {
        left: 8px;
        top: 8px;
      }

      .landing-home-header .register-brand .logo-mark::after {
        left: 11px;
        top: 6px;
      }

      .landing-home-nav {
        display: none;
      }

      .landing-home-login {
        display: none;
      }

      .landing-home-hero {
        padding: 42px 0 30px;
      }

      .landing-home-kicker {
        margin-bottom: 16px;
        font-size: 11px;
      }

      .landing-home-hero h1 {
        font-size: 46px;
        margin-bottom: 16px;
        line-height: 1.08;
      }

      .landing-home-sub {
        max-width: 22ch;
        font-size: 16px;
        line-height: 26px;
      }

      .landing-home-entry {
        min-height: 54px;
        margin-top: 34px;
        padding: 0 30px;
        font-size: 15px;
      }

      .landing-home-footer {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        min-height: 82px;
        text-align: center;
      }

      .landing-home-footer-links {
        gap: 18px;
      }
    }

    @media (max-width: 1100px) {
      .stats,
      .plan-grid,
      .refer-stats,
      .refer-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .usage-grid,
      .doc-layout,
      .profile-grid,
      .refer-grid,
      .recharge-grid,
      .register-hero,
      .register-proof,
      .register-flow-grid,
      .register-capability-layout,
      .register-hero-refined,
      .register-method-grid,
      .register-control {
        grid-template-columns: 1fr;
      }

      .register-meta {
        grid-template-columns: 1fr;
      }

      .register-meta div + div {
        border-top: 1px solid var(--register-line);
        border-left: 0;
      }

      .toc {
        position: static;
        display: flex;
        overflow-x: auto;
      }
    }

    @media (max-width: 860px) {
      body.mobile-menu-open {
        overflow: hidden;
      }

      .app {
        grid-template-columns: 1fr;
      }

      .app::before {
        display: none;
      }

      .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 45;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: 0 16px;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(12px);
      }

      body.auth-flow .mobile-topbar {
        display: none;
      }

      .mobile-menu-button {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #ffffff;
        color: #344054;
      }

      .mobile-menu-button .icon {
        width: 19px;
        height: 19px;
      }

      .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: block;
        background: rgba(15, 23, 42, 0.28);
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease;
      }

      body.mobile-menu-open .mobile-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
      }

      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(82vw, 280px);
        height: 100vh;
        height: 100dvh;
        padding: 16px;
        overflow-y: auto;
        box-shadow: 18px 0 36px rgba(15, 23, 42, 0.14);
        transform: translateX(-100%);
        transition: transform 180ms ease;
      }

      body.mobile-menu-open .sidebar {
        transform: translateX(0);
      }

      .logo {
        padding-bottom: 14px;
      }

      .nav-group {
        display: grid;
        gap: 6px;
        margin-bottom: 18px;
      }

      .nav-label {
        display: block;
      }

      .nav-item {
        width: 100%;
      }

      .main {
        grid-column: auto;
        padding: 24px 16px 60px;
      }

      .register-landing {
        margin: -24px -16px -60px;
        padding: 16px 16px 0;
      }

      .register-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        margin-bottom: 36px;
      }

      .register-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 18px;
        overflow-x: auto;
        padding-bottom: 12px;
      }

      .register-hero {
        gap: 32px;
        padding-bottom: 36px;
      }

      .register-title {
        font-size: 44px;
        line-height: 1.1;
      }

      .register-sub {
        font-size: 16px;
        line-height: 26px;
      }

      .register-shell,
      .register-hero,
      .register-sub,
      .signup-card,
      .register-feature-card {
        max-width: 100%;
      }

      .register-proof {
        margin-bottom: 50px;
      }

      .register-flow,
      .register-capabilities {
        margin: 0 -16px -60px;
        padding: 56px 16px;
      }

      .register-flow {
        margin-bottom: 0;
      }

      .register-capabilities {
        margin-bottom: 0;
      }

      .register-section-head h2 {
        font-size: 32px;
        line-height: 38px;
      }

      .register-refined {
        margin: -24px -16px -60px;
        padding: 16px 16px 64px;
        background-size: 54px 100%, 100% 100%;
      }

      .register-refined .register-header {
        margin-bottom: 46px;
      }

      .register-hero-refined {
        gap: 34px;
        padding-bottom: 56px;
      }

      .register-refined .register-title {
        font-size: 42px;
        line-height: 1.12;
      }

      .register-meta-refined {
        grid-template-columns: 1fr;
      }

      .register-method,
      .register-control {
        padding-top: 44px;
      }

      .register-landing-home,
      .register-landing-auth {
        margin: -24px -16px -60px;
        padding: 16px 16px 28px;
      }

      .register-home-shell,
      .register-auth-shell {
        min-height: calc(100dvh - 44px);
      }

      .register-home-header,
      .register-auth-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 18px;
        margin-bottom: 0;
      }

      .register-home-hero,
      .register-auth-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 42px 0 28px;
      }

      .register-home-panel,
      .register-auth-card {
        width: min(420px, 100%);
        justify-self: start;
      }
    }

    @media (max-width: 640px) {
      .stats,
      .unlock-grid,
      .quick-grid,
      .doc-summary-grid,
      .refer-stats,
      .refer-steps,
      .profile-mini-grid,
      .pay-method-grid,
      .credit-grid,
      .plan-grid {
        grid-template-columns: 1fr;
      }

      .page-head,
      .toolbar,
      .recharge-summary,
      .profile-account-row,
      .profile-hero,
      .endpoint-row,
      .doc-list-item,
      .register-header,
      .register-actions {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
      }

      .recharge-metrics {
        text-align: left;
      }

      .profile-account-note {
        text-align: left;
      }

      .register-nav {
        gap: 14px;
        font-size: 13px;
      }

      .register-actions .btn {
        width: 100%;
      }

      .signup-card {
        padding: 24px;
      }

      .register-title {
        font-size: 38px;
      }

      .register-cta-row,
      .signup-anchor,
      .register-text-link {
        width: 100%;
      }

      .register-text-link {
        display: inline-flex;
        justify-content: center;
        min-height: 42px;
        align-items: center;
      }

      .register-proof div,
      .register-flow-step,
      .register-feature-card {
        padding: 20px;
      }

      .register-api-panel {
        min-height: 0;
        padding: 20px;
      }

      .register-panel-head {
        margin-bottom: 28px;
      }

      .register-panel-head strong {
        font-size: 20px;
        line-height: 28px;
      }

      .register-feature-card {
        grid-template-columns: 1fr;
      }

      .register-section-head h2 {
        font-size: 29px;
        line-height: 35px;
      }

      .register-refined .register-title {
        font-size: 36px;
      }

      .register-refined .register-sub {
        font-size: 16px;
        line-height: 27px;
      }

      .register-endpoint-panel {
        min-height: 220px;
        padding: 20px;
      }

      .register-endpoint-panel strong {
        font-size: 20px;
        line-height: 29px;
      }

      .register-steps li,
      .register-control-list article {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .register-steps strong,
      .register-steps p {
        grid-column: auto;
      }

      .register-landing-home,
      .register-landing-auth {
        padding-bottom: 22px;
      }

      .register-home-header,
      .register-auth-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
      }

      .register-home-header .register-nav,
      .register-auth-header .register-nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 20px;
        order: 3;
        overflow-x: auto;
      }

      .register-home-header .register-actions,
      .register-auth-header .register-actions {
        align-items: flex-end;
      }

      .register-home-header .register-actions .btn,
      .register-auth-header .register-actions .btn {
        width: auto;
        min-height: 36px;
        padding: 0 16px;
      }

      .register-home-hero,
      .register-auth-hero {
        align-content: start;
        gap: 24px;
        padding: 24px 0 28px;
        text-align: left;
      }

      .register-home-kicker {
        margin-bottom: 14px;
      }

      .register-home-hero h1,
      .register-auth-hero h1 {
        max-width: 280px;
        margin-bottom: 14px;
        font-size: clamp(36px, 9.2vw, 44px);
        line-height: 1.04;
      }

      .register-home-hero p,
      .register-auth-hero p {
        max-width: 280px;
        font-size: 16px;
        line-height: 25px;
      }

      .register-home-actions {
        width: 100%;
        flex-direction: column;
        margin-top: 22px;
      }

      .register-home-actions .btn,
      .signup-form .signup-input,
      .signup-form .signup-submit {
        width: 100%;
      }

      .register-home-panel {
        width: 100%;
      }

      .register-home-footer {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 8px 14px;
        padding-top: 14px;
        font-size: 12px;
      }

      .register-auth-card {
        width: 100%;
        padding: 20px;
        border-radius: 20px;
      }

      .copy-field {
        grid-template-columns: 1fr;
      }

      .refer-code-row,
      .refer-actions,
      .profile-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .image-workbench {
        grid-template-columns: 1fr;
      }

      .image-fields-grid {
        grid-template-columns: 1fr;
      }

      .image-settings {
        position: static;
        max-height: none;
        overflow: visible;
      }

      .image-settings .btn.primary {
        position: static;
        box-shadow: none;
      }

      .image-preview {
        min-height: 360px;
      }

      .recent-activity-item {
        grid-template-columns: 1fr;
      }

      .recent-activity-cost {
        text-align: left;
      }
    }

    /* AI gateway public/auth refresh: light Resend-inspired surfaces adapted away from dark canvas. */
    .landing-home-page {
      --landing-ink: #101828;
      --landing-soft: #475467;
      --landing-muted: #7a8796;
      --landing-line: rgba(16, 24, 40, 0.1);
      --landing-accent: #00a884;
      --landing-accent-strong: #007f73;
      --landing-blue: #2f8cff;
      --landing-sun: #ffb24a;
      background:
        radial-gradient(ellipse at var(--landing-mx) var(--landing-my), rgba(255, 255, 255, 0.94) 0%, rgba(174, 246, 232, 0.28) 30%, transparent 62%),
        radial-gradient(circle at 78% 18%, rgba(47, 140, 255, 0.12), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(255, 178, 74, 0.14), transparent 32%),
        linear-gradient(180deg, #fbfffd 0%, #f4fbf9 52%, #ffffff 100%);
    }

    .landing-home-page::before {
      background:
        linear-gradient(116deg, transparent 8%, rgba(0, 168, 132, 0.1) 25%, rgba(47, 140, 255, 0.08) 47%, rgba(255, 178, 74, 0.08) 68%, transparent 88%),
        radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.74), transparent 56%);
      opacity: 0.9;
      filter: blur(28px) saturate(118%);
    }

    .landing-home-page::after {
      background:
        linear-gradient(90deg, rgba(16, 24, 40, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 24, 40, 0.028) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 42%, transparent 74%);
      background-size: 28px 28px, 28px 28px, 100% 100%;
      opacity: 0.58;
    }

    .landing-flow-canvas {
      opacity: 0.3;
      filter: saturate(118%) contrast(1.02);
    }

    .landing-home-shell {
      width: min(1180px, 100%);
      min-height: calc(100dvh - 54px);
    }

    .landing-home-header {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 78px;
    }

    .landing-home-header .register-brand,
    .register-auth-header .register-brand {
      gap: 10px;
      padding: 7px 10px 7px 8px;
      border: 1px solid rgba(16, 24, 40, 0.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(18px);
    }

    .landing-home-header .register-brand .logo-mark,
    .register-auth-header .register-brand .logo-mark {
      border-radius: 10px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, #0fbf9f 0%, #2f8cff 100%);
      box-shadow: 0 10px 24px rgba(0, 168, 132, 0.2);
    }

    .landing-home-header .register-brand em,
    .register-auth-header .register-brand em {
      color: #008b7d;
    }

    .landing-home-hero {
      grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.86fr);
      align-items: center;
      gap: clamp(36px, 6vw, 78px);
      place-items: stretch;
      padding: 54px 0 44px;
    }

    .landing-home-hero::before {
      inset: 8% 20% auto;
      height: min(420px, 52vh);
      background:
        radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3) 42%, transparent 72%),
        radial-gradient(ellipse at 30% 42%, rgba(0, 168, 132, 0.16), transparent 62%),
        radial-gradient(ellipse at 72% 48%, rgba(47, 140, 255, 0.12), transparent 64%);
    }

    .landing-home-copy {
      justify-items: start;
      width: 100%;
      text-align: left;
    }

    .landing-home-kicker,
    .register-home-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: #007f73;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: none;
    }

    .landing-home-kicker::before,
    .register-home-kicker::before {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #00a884;
      box-shadow: 0 0 0 5px rgba(0, 168, 132, 0.12);
      content: "";
    }

    .landing-home-hero h1 {
      max-width: 720px;
      margin-bottom: 24px;
      color: #101828;
      font-family: "Segoe UI Variable Display", "Aptos Display", "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
      font-size: clamp(56px, 7vw, 92px);
      font-weight: 760;
      line-height: 1;
      letter-spacing: 0;
    }

    .landing-home-title-line + .landing-home-title-line {
      margin-top: 12px;
      background: linear-gradient(90deg, #101828 0%, #007f73 46%, #2f8cff 100%);
      font-size: 0.58em;
      font-weight: 680;
    }

    .landing-home-sub {
      max-width: 48ch;
      color: #475467;
      font-size: 19px;
      line-height: 32px;
    }

    .landing-home-entry {
      min-height: 56px;
      margin-top: 34px;
      padding: 0 8px 0 24px;
      border: 1px solid rgba(16, 24, 40, 0.92);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        #101828;
      color: #ffffff;
      font-size: 15px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 44px rgba(16, 24, 40, 0.16),
        0 0 0 7px rgba(0, 168, 132, 0.08);
    }

    .landing-home-entry:hover {
      border-color: #007f73;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0)),
        #0d1b24;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 22px 52px rgba(16, 24, 40, 0.18),
        0 0 0 8px rgba(0, 168, 132, 0.12);
    }

    .landing-home-entry-icon {
      width: 40px;
      height: 40px;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.1);
    }

    .landing-home-visual {
      position: relative;
      z-index: 1;
      display: grid;
      align-items: center;
      min-width: 0;
    }

    .gateway-panel {
      position: relative;
      overflow: hidden;
      min-height: 430px;
      padding: 22px;
      border: 1px solid rgba(16, 24, 40, 0.11);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.7);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 30px 80px rgba(16, 24, 40, 0.12);
      backdrop-filter: blur(22px);
    }

    .gateway-panel::before {
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(circle at 28% 22%, rgba(0, 168, 132, 0.16), transparent 32%),
        radial-gradient(circle at 78% 34%, rgba(47, 140, 255, 0.13), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72));
      content: "";
      pointer-events: none;
    }

    .gateway-panel-head,
    .gateway-route,
    .gateway-metrics,
    .gateway-stream {
      position: relative;
      z-index: 1;
    }

    .gateway-panel-head {
      display: flex;
      gap: 7px;
      padding-bottom: 22px;
    }

    .gateway-panel-head span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #d0d5dd;
    }

    .gateway-panel-head span:nth-child(1) {
      background: #ffb24a;
    }

    .gateway-panel-head span:nth-child(2) {
      background: #00a884;
    }

    .gateway-panel-head span:nth-child(3) {
      background: #2f8cff;
    }

    .gateway-route {
      display: grid;
      grid-template-columns: 64px minmax(36px, 1fr) 112px minmax(36px, 1fr) 76px;
      align-items: center;
      min-height: 142px;
      margin-top: 34px;
    }

    .route-node,
    .route-hub {
      display: grid;
      place-items: center;
      min-height: 52px;
      border: 1px solid rgba(16, 24, 40, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.72);
      color: #344054;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
    }

    .route-hub {
      min-height: 112px;
      border-color: rgba(0, 168, 132, 0.28);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(238, 255, 251, 0.76));
      color: #007f73;
      box-shadow: 0 18px 46px rgba(0, 168, 132, 0.16);
    }

    .route-line {
      height: 2px;
      background: linear-gradient(90deg, rgba(0, 168, 132, 0.12), rgba(47, 140, 255, 0.52), rgba(0, 168, 132, 0.12));
    }

    .gateway-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 42px;
      overflow: hidden;
      border: 1px solid rgba(16, 24, 40, 0.09);
      border-radius: 8px;
      background: rgba(16, 24, 40, 0.08);
    }

    .gateway-metrics div {
      min-width: 0;
      padding: 16px;
      background: rgba(255, 255, 255, 0.7);
    }

    .gateway-metrics strong,
    .gateway-metrics span {
      display: block;
    }

    .gateway-metrics strong {
      color: #101828;
      font-size: 20px;
      line-height: 1.2;
    }

    .gateway-metrics span {
      margin-top: 6px;
      color: #667085;
      font-size: 12px;
      line-height: 18px;
    }

    .gateway-stream {
      display: grid;
      gap: 10px;
      margin-top: 26px;
    }

    .gateway-stream span {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(0, 168, 132, 0.14), rgba(47, 140, 255, 0.42), rgba(0, 168, 132, 0.1));
      opacity: calc(0.42 + var(--i) * 0.12);
      transform-origin: left;
      animation: gatewayStream 2.8s ease-in-out infinite;
      animation-delay: calc(var(--i) * -0.28s);
    }

    @keyframes gatewayStream {
      0%,
      100% {
        transform: scaleX(0.58);
      }

      50% {
        transform: scaleX(1);
      }
    }

    .landing-home-footer {
      min-height: 76px;
      color: #7a8796;
    }

    .landing-home-footer p {
      color: #7a8796;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 18px;
    }

    .register-landing-auth {
      --register-bg: #f5fbf9;
      --register-card: rgba(255, 255, 255, 0.78);
      --register-ink: #101828;
      --register-soft: #475467;
      --register-muted: #667085;
      --register-line: rgba(16, 24, 40, 0.1);
      --register-line-strong: rgba(16, 24, 40, 0.14);
      --register-accent: #00a884;
      --register-accent-dark: #007f73;
      background:
        radial-gradient(circle at 16% 16%, rgba(0, 168, 132, 0.13), transparent 32%),
        radial-gradient(circle at 88% 22%, rgba(47, 140, 255, 0.12), transparent 30%),
        radial-gradient(circle at 78% 86%, rgba(255, 178, 74, 0.12), transparent 30%),
        linear-gradient(180deg, #fbfffd 0%, #f4fbf9 58%, #ffffff 100%);
    }

    .register-landing-auth::before {
      background:
        linear-gradient(90deg, rgba(16, 24, 40, 0.032) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 24, 40, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0));
      background-size: 28px 28px, 28px 28px, 100% 100%;
    }

    .register-auth-header {
      display: flex;
      justify-content: space-between;
      min-height: 78px;
    }

    .register-auth-header .register-nav {
      justify-content: flex-end;
    }

    .register-auth-header .register-nav a {
      min-height: 38px;
      padding: 9px 14px;
      border: 1px solid rgba(16, 24, 40, 0.09);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.56);
      color: #344054;
      backdrop-filter: blur(14px);
    }

    .register-auth-header .register-nav a:hover {
      border-color: rgba(0, 168, 132, 0.24);
      color: #007f73;
    }

    .register-auth-hero {
      grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
      padding: 64px 0 58px;
    }

    .register-auth-hero h1 {
      color: #101828;
      font-size: clamp(42px, 5vw, 68px);
      font-weight: 760;
      letter-spacing: 0;
    }

    .register-auth-hero p {
      color: #475467;
    }

    .register-auth-card {
      border-color: rgba(16, 24, 40, 0.12);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 72px rgba(16, 24, 40, 0.12);
      backdrop-filter: blur(22px);
    }

    .signup-head h2 {
      color: #101828;
      font-size: 24px;
      font-weight: 720;
    }

    .signup-input {
      border-color: rgba(16, 24, 40, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.74);
    }

    .signup-input:focus {
      border-color: #00a884;
      box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.1);
    }

    .signup-submit {
      border-radius: 8px;
      background: #101828;
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.14);
    }

    .signup-submit:hover {
      background: #0d1b24;
    }

    .signup-foot a {
      color: #007f73;
      text-decoration-color: rgba(0, 168, 132, 0.22);
    }

    @media (max-width: 980px) {
      .landing-home-hero {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 36px;
      }

      .landing-home-copy {
        justify-items: center;
        text-align: center;
      }

      .landing-home-visual {
        width: min(560px, 100%);
        justify-self: center;
      }

      .gateway-panel {
        min-height: 360px;
      }

      .register-auth-hero {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .landing-home-header {
        justify-content: flex-start;
      }

      .landing-home-hero {
        padding: 30px 0 28px;
      }

      .landing-home-hero h1 {
        max-width: 340px;
        font-size: clamp(42px, 13vw, 56px);
      }

      .landing-home-title-line + .landing-home-title-line {
        font-size: 0.62em;
      }

      .landing-home-sub {
        max-width: 31ch;
        font-size: 16px;
        line-height: 26px;
      }

      .landing-home-entry {
        width: 100%;
        max-width: 300px;
      }

      .landing-home-visual {
        display: none;
      }

      .register-auth-header {
        align-items: center;
      }

      .register-auth-header .register-nav {
        grid-column: auto;
        order: initial;
      }

      .register-auth-hero {
        padding-top: 30px;
      }
    }

    /* AI gateway public/auth v2: Apple-inspired light gallery, calmer and more premium. */
    .landing-home-page {
      --landing-ink: #1d1d1f;
      --landing-soft: #4b5563;
      --landing-muted: #86868b;
      --landing-line: rgba(29, 29, 31, 0.08);
      --landing-accent: #0066cc;
      --landing-accent-strong: #0066cc;
      background:
        radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.86) 0%, rgba(245, 245, 247, 0.42) 38%, transparent 68%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 72%, #ffffff 100%);
    }

    .landing-home-page::before {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0)),
        radial-gradient(ellipse at 50% 46%, rgba(0, 102, 204, 0.075), transparent 54%),
        radial-gradient(ellipse at 48% 70%, rgba(0, 168, 132, 0.055), transparent 50%);
      filter: blur(18px) saturate(110%);
      opacity: 1;
    }

    .landing-home-page::after {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.78)),
        linear-gradient(90deg, rgba(29, 29, 31, 0.022) 1px, transparent 1px),
        linear-gradient(180deg, rgba(29, 29, 31, 0.018) 1px, transparent 1px);
      background-size: 100% 100%, 42px 42px, 42px 42px;
      opacity: 0.68;
    }

    .landing-flow-canvas {
      opacity: 0.16;
      filter: saturate(90%) contrast(1);
    }

    .landing-home-shell {
      width: min(1120px, 100%);
      min-height: calc(100dvh - 54px);
    }

    .landing-home-header {
      justify-content: center;
      min-height: 72px;
    }

    .landing-home-header .register-brand {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      color: #1d1d1f;
      font-size: 18px;
      font-weight: 600;
      pointer-events: none;
    }

    .landing-home-header .register-brand .logo-mark {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, #0066cc 0%, #00a884 100%);
      box-shadow: 0 3px 12px rgba(0, 102, 204, 0.22);
    }

    .landing-home-hero {
      grid-template-columns: 1fr;
      gap: 34px;
      align-content: center;
      padding: clamp(34px, 6vh, 64px) 0 28px;
      text-align: center;
    }

    .landing-home-hero::before {
      inset: 8% 8% auto;
      height: min(360px, 44vh);
      background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.34) 44%, transparent 72%);
      filter: blur(8px);
      opacity: 1;
    }

    .landing-home-copy {
      justify-items: center;
      width: min(900px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    .landing-home-kicker {
      margin-bottom: 16px;
      color: #86868b;
      font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.47;
    }

    .landing-home-kicker::before {
      display: none;
    }

    .landing-home-hero h1 {
      max-width: 920px;
      margin-bottom: 20px;
      color: #1d1d1f;
      font-family: "SF Pro Display", "Segoe UI Variable Display", "Aptos Display", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
      font-size: clamp(56px, 8vw, 96px);
      font-weight: 600;
      line-height: 1.03;
      letter-spacing: 0;
    }

    .landing-home-title-line:first-child {
      color: #1d1d1f;
      font-weight: 600;
    }

    .landing-home-title-line + .landing-home-title-line {
      margin-top: 6px;
      background: none;
      color: #1d1d1f;
      font-size: 0.55em;
      font-weight: 600;
      -webkit-background-clip: initial;
      background-clip: initial;
    }

    .landing-home-sub {
      max-width: 660px;
      color: #4b5563;
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 300;
      line-height: 1.48;
    }

    .landing-home-entry {
      min-height: 46px;
      margin-top: 30px;
      padding: 0 8px 0 22px;
      border: 0;
      border-radius: 999px;
      background: #0066cc;
      color: #ffffff;
      font-size: 17px;
      font-weight: 400;
      box-shadow: none;
      transform: translateZ(0);
    }

    .landing-home-entry::before,
    .landing-home-entry::after {
      display: none;
    }

    .landing-home-entry:hover {
      border-color: transparent;
      background: #0071e3;
      box-shadow: none;
      transform: translateY(-1px);
    }

    .landing-home-entry:active {
      transform: scale(0.97);
    }

    .landing-home-entry-icon {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      box-shadow: none;
      font-size: 17px;
    }

    .landing-home-visual {
      width: min(760px, 100%);
      margin: 0 auto;
    }

    .gateway-panel {
      min-height: 250px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .gateway-panel::before {
      inset: auto 6% 4%;
      height: 54%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(0, 102, 204, 0.1), rgba(0, 168, 132, 0.06) 42%, transparent 70%);
      filter: blur(18px);
    }

    .gateway-panel-head,
    .gateway-metrics,
    .gateway-stream {
      display: none;
    }

    .gateway-route {
      grid-template-columns: minmax(76px, 0.72fr) minmax(52px, 1fr) minmax(148px, 1.2fr) minmax(52px, 1fr) minmax(88px, 0.72fr);
      min-height: 218px;
      margin-top: 0;
      perspective: 900px;
      transform: rotateX(58deg) rotateZ(-7deg);
      transform-style: preserve-3d;
    }

    .route-node,
    .route-hub {
      min-height: 64px;
      border: 1px solid rgba(29, 29, 31, 0.1);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.76);
      color: #4b5563;
      font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      box-shadow: rgba(0, 0, 0, 0.16) 3px 5px 30px 0;
      backdrop-filter: blur(20px);
    }

    .route-hub {
      min-height: 132px;
      border-color: rgba(0, 102, 204, 0.18);
      background: rgba(255, 255, 255, 0.86);
      color: #1d1d1f;
      font-size: 16px;
      box-shadow: rgba(0, 0, 0, 0.2) 3px 8px 34px 0;
    }

    .route-line {
      height: 2px;
      background: linear-gradient(90deg, rgba(0, 102, 204, 0.08), rgba(0, 102, 204, 0.5), rgba(0, 168, 132, 0.34));
      box-shadow: 0 0 18px rgba(0, 102, 204, 0.16);
    }

    .landing-home-footer {
      min-height: 54px;
    }

    .landing-home-footer p {
      color: #86868b;
      font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
    }

    .register-landing-auth {
      background:
        radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, 0.88), transparent 42%),
        radial-gradient(ellipse at 78% 30%, rgba(0, 102, 204, 0.075), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    }

    .register-auth-header .register-brand {
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      font-weight: 600;
    }

    .register-auth-header .register-nav a {
      border: 0;
      border-radius: 999px;
      background: #0066cc;
      color: #ffffff;
      font-size: 14px;
      font-weight: 400;
    }

    .register-auth-header .register-nav a:hover {
      background: #0071e3;
      color: #ffffff;
    }

    .register-auth-hero h1 {
      font-family: "SF Pro Display", "Segoe UI Variable Display", "Aptos Display", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
      font-weight: 600;
      letter-spacing: 0;
    }

    .register-home-kicker {
      color: #86868b;
      font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
      font-size: 17px;
      font-weight: 400;
    }

    .register-home-kicker::before {
      display: none;
    }

    .register-auth-card {
      border: 1px solid rgba(29, 29, 31, 0.08);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: rgba(0, 0, 0, 0.1) 3px 5px 30px 0;
    }

    .signup-submit {
      border-radius: 999px;
      background: #0066cc;
      font-weight: 400;
      box-shadow: none;
    }

    .signup-submit:hover {
      background: #0071e3;
    }

    @media (max-width: 980px) {
      .landing-home-hero {
        grid-template-columns: 1fr;
      }

      .landing-home-visual {
        width: min(620px, 100%);
      }
    }

    @media (max-width: 640px) {
      .landing-home-header {
        justify-content: center;
      }

      .landing-home-hero h1 {
        font-size: clamp(42px, 12vw, 56px);
      }

      .landing-home-title-line + .landing-home-title-line {
        font-size: 0.62em;
      }

      .landing-home-entry {
        width: auto;
        max-width: none;
      }
    }

    /* Defined-inspired final hero: one full-screen video, one message, one action. */
    .landing-home-page {
      --landing-ink: #111317;
      --landing-soft: #4e5968;
      --landing-muted: #6f7b8b;
      --landing-accent: #0a6bff;
      position: relative;
      min-height: 100dvh;
      background: #f7fafc;
      color: var(--landing-ink);
    }

    .landing-background-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.62;
      filter: saturate(0.78) contrast(0.92) brightness(1.22);
      pointer-events: none;
    }

    .landing-home-page::before {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.42) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.1) 48%, rgba(245, 248, 252, 0.72) 100%);
      content: "";
      filter: none;
      opacity: 1;
      pointer-events: none;
      transform: none;
      animation: none;
    }

    .landing-home-page::after {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(90deg, rgba(17, 19, 23, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(17, 19, 23, 0.035) 1px, transparent 1px);
      background-size: 44px 44px;
      content: "";
      opacity: 0.32;
      pointer-events: none;
      transform: none;
    }

    .landing-flow-canvas {
      display: none;
    }

    .landing-home-shell {
      position: relative;
      z-index: 1;
      display: grid;
      width: min(1240px, 100%);
      min-height: calc(100dvh - 54px);
      grid-template-rows: auto minmax(0, 1fr) auto;
      margin: 0 auto;
    }

    .landing-home-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-height: 86px;
    }

    .landing-home-header .register-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: #111317;
      font-size: 18px;
      font-weight: 760;
      letter-spacing: 0;
      pointer-events: none;
    }

    .landing-home-header .register-brand .logo-mark {
      width: 31px;
      height: 31px;
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, #0a6bff 0%, #00a878 100%);
      box-shadow: 0 10px 28px rgba(10, 107, 255, 0.18);
    }

    .landing-home-header .register-brand em {
      color: #111317;
      font-style: normal;
    }

    .landing-home-hero {
      display: grid;
      grid-template-columns: minmax(0, 980px);
      align-content: center;
      justify-content: start;
      min-height: 0;
      padding: clamp(42px, 9vh, 96px) 0 clamp(38px, 7vh, 72px);
      text-align: left;
    }

    .landing-home-hero::before {
      display: none;
    }

    .landing-home-copy {
      display: grid;
      justify-items: start;
      width: 100%;
      max-width: 980px;
      margin: 0;
      text-align: left;
    }

    .landing-home-kicker {
      margin: 0 0 22px;
      color: var(--landing-muted);
      font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.45;
      letter-spacing: 0;
      text-transform: none;
    }

    .landing-home-kicker::before {
      display: none;
    }

    .landing-home-hero h1 {
      max-width: 980px;
      margin: 0 0 26px;
      color: #111317;
      font-family: "Segoe UI Variable Display", "Aptos Display", "PingFang SC", "Microsoft YaHei UI", Inter, system-ui, sans-serif;
      font-size: clamp(62px, 8.8vw, 132px);
      font-weight: 800;
      line-height: 0.96;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .landing-home-title-line,
    .landing-home-title-line:first-child {
      display: block;
      color: #111317;
      font-weight: 800;
    }

    .landing-home-title-line + .landing-home-title-line {
      margin-top: 2px;
      background: none;
      color: #111317;
      font-size: 1em;
      font-weight: 800;
      -webkit-background-clip: initial;
      background-clip: initial;
    }

    .landing-home-sub {
      max-width: 650px;
      color: var(--landing-soft);
      font-size: clamp(18px, 1.55vw, 22px);
      font-weight: 430;
      line-height: 1.65;
      text-wrap: pretty;
    }

    .landing-home-entry {
      min-height: 52px;
      margin-top: 34px;
      padding: 0 8px 0 24px;
      border: 1px solid rgba(17, 19, 23, 0.92);
      border-radius: 999px;
      background: #111317;
      color: #ffffff;
      font-size: 16px;
      font-weight: 680;
      box-shadow: none;
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .landing-home-entry::before,
    .landing-home-entry::after {
      display: none;
    }

    .landing-home-entry:hover {
      border-color: #0a6bff;
      background: #0a6bff;
      box-shadow: none;
      transform: translateY(-1px);
    }

    .landing-home-entry:active {
      transform: scale(0.98);
    }

    .landing-home-entry-icon {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      box-shadow: none;
      color: #ffffff;
      font-size: 18px;
    }

    .landing-home-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-height: 74px;
      color: var(--landing-muted);
      text-align: left;
    }

    .landing-home-footer p {
      color: var(--landing-muted);
      font-size: 13px;
      line-height: 1.45;
    }

    @media (max-width: 860px) {
      .landing-home-page {
        margin: -24px -16px -60px;
      }

      .landing-home-shell {
        min-height: calc(100dvh - 44px);
      }

      .landing-home-header {
        min-height: 72px;
      }

      .landing-home-hero {
        grid-template-columns: 1fr;
        align-content: center;
        padding: 34px 0 34px;
      }

      .landing-home-copy {
        max-width: 100%;
      }

      .landing-home-hero h1 {
        font-size: clamp(48px, 15vw, 76px);
        line-height: 1;
      }

      .landing-home-sub {
        max-width: 32ch;
        font-size: 16px;
        line-height: 1.65;
      }
    }

    @media (max-width: 640px) {
      .landing-background-video {
        opacity: 0.5;
      }

      .landing-home-page::before {
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.7)),
          linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(245, 248, 252, 0.86));
      }

      .landing-home-header {
        justify-content: flex-start;
      }

      .landing-home-kicker {
        margin-bottom: 18px;
        font-size: 13px;
      }

      .landing-home-hero h1 {
        max-width: 7ch;
        margin-bottom: 20px;
      }

      .landing-home-entry {
        width: auto;
        max-width: 100%;
      }

      .landing-home-footer {
        min-height: 64px;
      }
    }

    /* Final tuning after visual QA: closer to definedvc.com, with crisp dark video contrast. */
    .landing-home-page {
      --landing-ink: #ffffff;
      --landing-soft: rgba(255, 255, 255, 0.78);
      --landing-muted: rgba(255, 255, 255, 0.58);
      background: #05070a;
      color: #ffffff;
    }

    .landing-background-video {
      opacity: 0.86;
      filter: saturate(0.72) contrast(1.08) brightness(0.76);
    }

    .landing-home-page::before {
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.5) 44%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.06) 48%, rgba(0, 0, 0, 0.46) 100%);
    }

    .landing-home-page::after {
      display: none;
    }

    .landing-home-header .register-brand {
      color: #ffffff;
    }

    .landing-home-header .register-brand em {
      color: #ffffff;
    }

    .landing-home-header .register-brand .logo-mark {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, #dff8ff 0%, #4ccfff 38%, #00a878 100%);
      box-shadow: 0 14px 34px rgba(76, 207, 255, 0.2);
    }

    .landing-home-kicker {
      color: var(--landing-muted);
    }

    .landing-home-hero h1,
    .landing-home-title-line,
    .landing-home-title-line:first-child,
    .landing-home-title-line + .landing-home-title-line {
      color: #ffffff;
    }

    .landing-home-sub {
      color: var(--landing-soft);
    }

    .landing-home-entry {
      border-color: rgba(255, 255, 255, 0.92);
      background: #ffffff;
      color: #080b10;
    }

    .landing-home-entry:hover {
      border-color: #ffffff;
      background: #eef8ff;
      color: #080b10;
    }

    .landing-home-entry-icon {
      background: #080b10;
      color: #ffffff;
    }

    .landing-home-footer p {
      color: rgba(255, 255, 255, 0.48);
    }

    @media (max-width: 640px) {
      .landing-background-video {
        opacity: 0.8;
        filter: saturate(0.7) contrast(1.1) brightness(0.68);
      }

      .landing-home-page::before {
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42)),
          linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.54));
      }
    }

    /* Defined-style composition: colorful motion stays visible, content anchors lower-right. */
    .landing-home-page {
      background: #08111b;
    }

    .landing-background-video {
      opacity: 1;
      filter: saturate(1.24) contrast(1.06) brightness(0.98);
    }

    .landing-home-page::before {
      background:
        linear-gradient(120deg, rgba(2, 9, 18, 0.02) 0%, rgba(2, 9, 18, 0.1) 46%, rgba(2, 9, 18, 0.66) 100%),
        linear-gradient(0deg, rgba(2, 9, 18, 0.58) 0%, rgba(2, 9, 18, 0.13) 42%, rgba(2, 9, 18, 0.02) 100%);
    }

    .landing-home-page::after {
      display: block;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
      background-size: 44px 44px;
      opacity: 0.2;
    }

    .landing-home-shell {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .landing-home-header {
      min-height: 82px;
    }

    .landing-home-hero {
      justify-content: end;
      align-content: end;
      min-height: 0;
      padding: 40px 0 clamp(42px, 7vh, 72px);
    }

    .landing-home-copy {
      justify-items: end;
      max-width: 780px;
      margin-left: auto;
      text-align: right;
    }

    .landing-home-kicker {
      margin-bottom: 18px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 14px;
      font-weight: 700;
    }

    .landing-home-hero h1 {
      max-width: 780px;
      margin-bottom: 22px;
      font-size: clamp(58px, 8vw, 118px);
      line-height: 0.94;
    }

    .landing-home-sub {
      max-width: 590px;
      color: rgba(255, 255, 255, 0.82);
      font-size: clamp(17px, 1.4vw, 20px);
      line-height: 1.7;
    }

    .landing-home-entry {
      min-height: 50px;
      margin-top: 30px;
      border-color: rgba(255, 255, 255, 0.72);
      background: rgba(255, 255, 255, 0.94);
      color: #07111e;
      backdrop-filter: blur(18px);
    }

    .landing-home-entry:hover {
      border-color: #ffffff;
      background: #ffffff;
    }

    .landing-home-footer {
      display: none;
    }

    @media (max-width: 860px) {
      .landing-home-hero {
        justify-content: start;
        align-content: end;
        padding: 40px 0 54px;
      }

      .landing-home-copy {
        justify-items: start;
        margin-left: 0;
        text-align: left;
      }

      .landing-home-page::before {
        background:
          linear-gradient(120deg, rgba(2, 9, 18, 0.12) 0%, rgba(2, 9, 18, 0.28) 52%, rgba(2, 9, 18, 0.66) 100%),
          linear-gradient(0deg, rgba(2, 9, 18, 0.68) 0%, rgba(2, 9, 18, 0.22) 54%, rgba(2, 9, 18, 0.08) 100%);
      }

      .landing-home-hero h1 {
        max-width: 8ch;
      }

      .landing-home-sub {
        max-width: 32ch;
      }
    }

    @media (max-width: 640px) {
      .landing-background-video {
        opacity: 1;
        filter: saturate(1.35) contrast(1.05) brightness(0.92);
      }
    }

    /* Light-video composition with a Defined-style lower-right glass panel. */
    .landing-home-page {
      --landing-ink: #101318;
      --landing-soft: rgba(16, 19, 24, 0.72);
      --landing-muted: rgba(16, 19, 24, 0.58);
      background: #eef7f8;
      color: var(--landing-ink);
    }

    .landing-background-video {
      opacity: 1;
      filter: invert(1) hue-rotate(165deg) saturate(1.18) contrast(0.9) brightness(1.16);
    }

    .landing-home-page::before {
      background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0.68) 100%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.04) 100%);
    }

    .landing-home-page::after {
      display: block;
      background:
        linear-gradient(90deg, rgba(16, 19, 24, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 19, 24, 0.032) 1px, transparent 1px);
      background-size: 44px 44px;
      opacity: 0.24;
    }

    .landing-home-header .register-brand,
    .landing-home-header .register-brand em {
      color: var(--landing-ink);
    }

    .landing-home-copy {
      position: relative;
      max-width: 560px;
      padding: clamp(22px, 3vw, 34px);
      border: 1px solid rgba(255, 255, 255, 0.64);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 28px 80px rgba(16, 24, 40, 0.12);
      backdrop-filter: blur(22px) saturate(126%);
    }

    .landing-home-copy::before {
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 38%, rgba(45, 190, 170, 0.16));
      content: "";
      pointer-events: none;
    }

    .landing-home-copy > * {
      position: relative;
      z-index: 1;
    }

    .landing-home-kicker {
      color: var(--landing-muted);
    }

    .landing-home-hero h1,
    .landing-home-title-line,
    .landing-home-title-line:first-child,
    .landing-home-title-line + .landing-home-title-line {
      color: var(--landing-ink);
    }

    .landing-home-hero h1 {
      max-width: 520px;
      font-size: clamp(42px, 5.5vw, 74px);
      line-height: 1;
    }

    .landing-home-sub {
      max-width: 480px;
      color: var(--landing-soft);
      font-size: clamp(15px, 1.15vw, 17px);
      line-height: 1.62;
    }

    .landing-home-entry {
      border-color: rgba(16, 19, 24, 0.92);
      background: #101318;
      color: #ffffff;
      backdrop-filter: none;
    }

    .landing-home-entry:hover {
      border-color: #101318;
      background: #1b2430;
      color: #ffffff;
    }

    .landing-home-entry-icon {
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff;
    }

    @media (max-width: 860px) {
      .landing-home-copy {
        justify-items: start;
        text-align: left;
      }

      .landing-home-page::before {
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.76)),
          linear-gradient(0deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.14));
      }
    }

    @media (max-width: 640px) {
      .landing-background-video {
        filter: invert(1) hue-rotate(165deg) saturate(1.08) contrast(0.92) brightness(1.1);
      }

      .landing-home-copy {
        padding: 22px;
      }
    }

    /* Final proportion fix: full-frame sharp light video + wider lower-right panel. */
    .landing-background-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 1;
      filter: invert(1) hue-rotate(168deg) saturate(1.42) contrast(1.02) brightness(1.02);
      transform: scale(1.2);
    }

    .landing-home-page::before {
      background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.5) 100%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.02) 100%);
    }

    .landing-home-hero {
      justify-content: end;
      align-content: end;
      padding: 40px 0 clamp(38px, 6vh, 64px);
    }

    .landing-home-copy {
      width: min(760px, calc(100vw - 96px));
      max-width: 760px;
      min-height: 330px;
      padding: 34px 38px;
      border-radius: 8px;
      text-align: right;
    }

    .landing-home-hero h1 {
      max-width: 690px;
      font-size: clamp(48px, 5.7vw, 78px);
      line-height: 1.02;
    }

    .landing-home-sub {
      max-width: 650px;
      font-size: clamp(15px, 1.15vw, 17px);
      line-height: 1.7;
    }

    @media (max-width: 860px) {
      .landing-home-copy {
        width: min(100%, 620px);
        min-height: 0;
        padding: 26px;
        text-align: left;
      }

      .landing-home-hero h1 {
        max-width: 9ch;
        font-size: clamp(42px, 12vw, 64px);
      }

      .landing-home-sub {
        max-width: 34ch;
      }
    }

    /* Final override: use the full-screen generated light motion layer; remove cropped stock-video artifacts. */
    .landing-background-video {
      display: none;
    }

    .landing-flow-canvas {
      display: block;
      opacity: 0.78;
      filter: saturate(1.18) contrast(1.02);
      image-rendering: auto;
      mix-blend-mode: multiply;
    }

    .landing-home-page {
      background:
        linear-gradient(180deg, #fbfffe 0%, #f2fbfa 48%, #ffffff 100%);
      padding: 26px 24px 0;
    }

    .landing-home-page::before {
      background:
        radial-gradient(ellipse at 28% 28%, rgba(83, 224, 204, 0.34), transparent 44%),
        radial-gradient(ellipse at 74% 22%, rgba(72, 166, 255, 0.22), transparent 42%),
        radial-gradient(ellipse at 52% 78%, rgba(255, 210, 125, 0.14), transparent 46%),
        linear-gradient(112deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.58));
      opacity: 1;
    }

    .landing-home-page::after {
      display: block;
      background:
        linear-gradient(90deg, rgba(10, 60, 80, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(10, 60, 80, 0.028) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: 0.28;
    }

    .landing-home-shell {
      width: 100%;
      max-width: none;
    }

    .landing-home-hero {
      justify-content: end;
      align-content: end;
      padding: 40px 0 36px;
    }

    .landing-home-copy {
      width: min(840px, calc(100vw - 64px));
      max-width: 840px;
      min-height: 318px;
      padding: 34px 38px;
      justify-items: end;
      text-align: right;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(242, 252, 250, 0.52));
    }

    .landing-home-hero h1 {
      max-width: 760px;
      font-size: clamp(48px, 5.2vw, 76px);
      line-height: 1.02;
    }

    .landing-home-sub {
      max-width: 700px;
      font-size: clamp(15px, 1.12vw, 17px);
      line-height: 1.68;
    }

    @media (max-width: 860px) {
      .landing-home-shell {
        width: calc(100% - 32px);
      }

      .landing-home-copy {
        width: 100%;
        min-height: 0;
        justify-items: start;
        text-align: left;
      }

      .landing-home-hero h1 {
        max-width: 9ch;
      }
    }

    /* Editorial lower-right panel: left-aligned, wider, quieter copy hierarchy. */
    .landing-home-hero {
      padding: 40px 0 44px;
    }

    .landing-home-copy {
      width: min(960px, calc(100vw - 64px));
      max-width: 960px;
      min-height: 320px;
      padding: 54px 56px 46px;
      justify-items: start;
      text-align: left;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(242, 252, 250, 0.48));
    }

    .landing-home-kicker {
      display: none;
    }

    .landing-home-kicker {
      margin-bottom: 24px;
      color: rgba(16, 19, 24, 0.56);
      font-size: 13px;
      font-weight: 760;
      line-height: 1;
    }

    .landing-home-kicker::after {
      display: block;
      width: 76px;
      height: 1px;
      margin-top: 18px;
      background: rgba(16, 19, 24, 0.18);
      content: "";
    }

    .landing-home-hero h1 {
      max-width: 780px;
      margin-bottom: 24px;
      font-size: clamp(52px, 5vw, 82px);
      line-height: 1.04;
      font-weight: 780;
    }

    .landing-home-sub {
      max-width: 720px;
      color: rgba(16, 19, 24, 0.66);
      font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
      font-size: clamp(17px, 1.28vw, 20px);
      font-weight: 400;
      line-height: 1.68;
    }

    .landing-home-entry {
      position: relative;
      gap: 14px;
      min-height: 44px;
      margin-top: 42px;
      padding: 0 0 8px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #101318;
      font-size: 15px;
      font-weight: 760;
      box-shadow: none;
    }

    .landing-home-entry::before {
      position: absolute;
      left: 0;
      right: 50px;
      bottom: 0;
      display: block;
      height: 1px;
      background: rgba(16, 19, 24, 0.34);
      content: "";
    }

    .landing-home-entry:hover {
      background: transparent;
      color: #0a6bff;
      transform: none;
    }

    .landing-home-entry:hover::before {
      background: #0a6bff;
    }

    .landing-home-entry-icon {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: #101318;
      color: #ffffff;
      transition: transform 180ms ease, background 180ms ease;
    }

    .landing-home-entry:hover .landing-home-entry-icon {
      background: #0a6bff;
      transform: translateX(2px);
    }

    @media (max-width: 860px) {
      .landing-home-copy {
        width: 100%;
        min-height: 0;
        padding: 28px;
      }

      .landing-home-kicker {
        margin-bottom: 18px;
      }

      .landing-home-hero h1 {
        max-width: 10ch;
        font-size: clamp(42px, 11vw, 64px);
      }
    }

    /* Final typography/CTA pass: traditional editorial serif, condensed title, text-link CTA. */
    .landing-home-copy {
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      min-height: 300px;
      padding: 46px 60px 46px;
      background: #f8fffc;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .landing-home-copy::before {
      display: none;
      background: none;
      content: none;
    }

    .landing-home-hero h1 {
      max-width: 660px;
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", "MingLiU", serif;
      margin-bottom: 20px;
      font-size: clamp(44px, 4.05vw, 66px);
      font-stretch: 82%;
      font-variation-settings: "wdth" 82;
      font-weight: 820;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .landing-home-sub {
      max-width: 620px;
      font-family: Georgia, "Times New Roman", "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
      font-size: clamp(16px, 1.08vw, 18px);
      font-style: italic;
      line-height: 1.62;
      letter-spacing: 0;
    }

    .landing-home-entry {
      align-items: center;
      gap: 0;
      isolation: auto;
      overflow: visible;
      width: max-content;
      min-width: 0;
      min-height: 44px;
      margin-top: 44px;
      padding: 0 24px;
      border: 1px solid currentColor;
      border-radius: 0;
      background: transparent;
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 16px;
      font-weight: 760;
      letter-spacing: 0;
      box-shadow: none;
    }

    .landing-home-entry::before {
      display: none;
      content: none;
    }

    .landing-home-entry::after {
      display: none;
      content: none;
    }

    .landing-home-entry:hover::before {
      display: none;
    }

    .landing-home-entry-icon {
      display: none;
    }

    .landing-home-entry:hover .landing-home-entry-icon {
      transform: none;
    }

    @media (max-width: 860px) {
      .landing-home-copy {
        min-height: 0;
        padding: 34px 30px 36px;
      }

      .landing-home-hero h1 {
        max-width: 10ch;
        font-size: clamp(36px, 9.5vw, 54px);
      }

      .landing-home-sub {
        font-size: 16px;
      }

      .landing-home-entry {
        margin-top: 42px;
      }
    }

    /* Add the selected Pexels video as a controlled full-screen base layer. */
    .landing-background-video {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.34;
      filter: saturate(0.82) contrast(0.9) brightness(1.18);
      mix-blend-mode: multiply;
      transform: none;
      pointer-events: none;
    }

    .landing-flow-canvas {
      z-index: 0;
      opacity: 0.29;
      mix-blend-mode: normal;
    }

    .landing-home-page::before,
    .landing-home-page::after {
      z-index: 0;
    }

    .landing-home-shell {
      z-index: 1;
    }

    .landing-home-header .landing-brand {
      display: inline-flex;
      width: max-content;
      align-items: center;
      gap: 0;
      padding: 0;
      color: inherit;
      font-size: 0;
      line-height: 0;
    }

    .landing-brand-logo {
      display: block;
      width: clamp(168px, 16vw, 240px);
      height: auto;
      object-fit: contain;
      transform: translateX(8px);
    }

    /* Auth pages: Stripe-inspired form discipline adapted to the landing visual system. */
    .register-landing-auth {
      --auth-ink: #101318;
      --auth-soft: rgba(16, 19, 24, 0.68);
      --auth-muted: rgba(16, 19, 24, 0.5);
      --auth-line: rgba(13, 37, 61, 0.16);
      --auth-line-strong: rgba(13, 37, 61, 0.28);
      --auth-focus: #087c73;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 100dvh;
      margin: -42px -48px -70px;
      padding: 26px 24px 0;
      background:
        radial-gradient(ellipse at 22% 18%, rgba(58, 222, 196, 0.2), transparent 44%),
        radial-gradient(ellipse at 84% 18%, rgba(94, 187, 236, 0.18), transparent 42%),
        linear-gradient(180deg, #f8fffd 0%, #effbf8 48%, #fbfbf6 100%);
      color: var(--auth-ink);
    }

    .register-landing-auth::before,
    .register-landing-auth::after {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      content: "";
    }

    .register-landing-auth::before {
      background:
        linear-gradient(90deg, rgba(14, 127, 99, 0.024) 1px, transparent 1px),
        linear-gradient(180deg, rgba(14, 127, 99, 0.02) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: 0.52;
    }

    .register-landing-auth::after {
      background:
        radial-gradient(ellipse at 52% 40%, rgba(255, 255, 255, 0.52), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.72));
      opacity: 0.86;
    }

    .register-auth-shell {
      position: relative;
      z-index: 1;
      display: grid;
      width: 100%;
      max-width: none;
      min-height: calc(100dvh - 26px);
      margin: 0;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .register-auth-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      min-height: 72px;
      margin: 0;
      border: 0;
    }

    .register-auth-header .auth-brand {
      display: inline-flex;
      width: max-content;
      padding: 0;
      font-size: 0;
      line-height: 0;
      transform: translate(8px, 5px);
    }

    .auth-brand-logo {
      display: block;
      width: clamp(168px, 16vw, 240px);
      height: auto;
      object-fit: contain;
    }

    .register-auth-header .register-nav {
      justify-content: end;
      min-width: 0;
      gap: 0;
    }

    .register-auth-header .register-nav a {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border: 1px solid rgba(16, 19, 24, 0.38);
      border-radius: 0;
      background: transparent;
      color: var(--auth-ink);
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 14px;
      font-weight: 760;
      text-decoration: none;
    }

    .register-auth-header .register-nav a:hover {
      border-color: var(--auth-ink);
      background: transparent;
      color: var(--auth-ink);
    }

    .register-auth-hero {
      display: grid;
      align-content: center;
      align-items: center;
      justify-content: center;
      width: min(1080px, calc(100vw - 96px));
      margin: 0 auto;
      grid-template-columns: minmax(0, 480px) minmax(360px, 420px);
      gap: 56px;
      min-height: calc(100dvh - 128px);
      padding: 28px 0 64px;
    }

    .register-auth-copy {
      align-self: center;
      max-width: 520px;
      padding-bottom: 0;
    }

    .register-auth-copy h1 {
      max-width: 480px;
      margin: 0 0 18px;
      color: var(--auth-ink);
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", "MingLiU", serif;
      font-size: clamp(44px, 4.3vw, 68px);
      font-stretch: 84%;
      font-variation-settings: "wdth" 84;
      font-weight: 820;
      line-height: 1.04;
      letter-spacing: 0;
    }

    .register-auth-copy p {
      max-width: 32ch;
      margin: 0;
      color: var(--auth-soft);
      font-family: Georgia, "Times New Roman", "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
      font-size: 17px;
      font-style: italic;
      line-height: 1.62;
    }

    .register-auth-card {
      align-self: center;
      width: min(420px, calc(100vw - 48px));
      min-height: 0;
      padding: 34px;
      border: 1px solid rgba(13, 37, 61, 0.18);
      border-radius: 0;
      background: #f8fffc;
      box-shadow: none;
    }

    .register-auth-card .signup-head {
      margin: 0 0 34px;
      padding: 0 0 22px;
      border-bottom: 1px solid var(--auth-line);
    }

    .register-auth-card .signup-head h2 {
      margin: 0 0 8px;
      color: var(--auth-ink);
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 24px;
      font-weight: 760;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .register-auth-card .signup-head p {
      margin: 0;
      color: var(--auth-muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .register-auth-card .signup-form {
      display: grid;
      gap: 19px;
    }

    .register-auth-card .signup-field {
      display: grid;
      gap: 10px;
    }

    .register-auth-card .signup-field label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      color: var(--auth-ink);
      font-size: 13px;
      font-weight: 760;
      line-height: 1.2;
    }

    .register-auth-card .signup-field label span {
      color: var(--auth-muted);
      font-weight: 500;
    }

    .register-auth-card .signup-input {
      width: 100%;
      min-height: 46px;
      padding: 0 13px;
      border: 1px solid var(--auth-line-strong);
      border-radius: 0;
      background: #ffffff;
      color: var(--auth-ink);
      font-size: 15px;
      font-weight: 400;
      line-height: 46px;
      outline: none;
      box-shadow: none;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .register-auth-card .signup-input::placeholder {
      color: rgba(16, 19, 24, 0.34);
    }

    .register-auth-card .signup-input:focus {
      border-color: var(--auth-focus);
      box-shadow: 0 0 0 3px rgba(8, 124, 115, 0.12);
    }

    .register-auth-card .signup-submit {
      width: 100%;
      min-height: 46px;
      margin-top: -8px;
      border: 1px solid var(--auth-ink);
      border-radius: 0;
      background: var(--auth-ink);
      color: #ffffff;
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 15px;
      font-weight: 760;
      box-shadow: none;
    }

    .register-auth-card .signup-submit:hover {
      border-color: #087c73;
      background: #087c73;
    }

    .register-auth-card .signup-foot {
      margin: 22px 0 0;
      color: var(--auth-muted);
      font-size: 13px;
      line-height: 1.5;
      text-align: left;
    }

    .register-auth-card .signup-terms {
      margin: -5px 0 -5px;
      color: var(--auth-muted);
      font-size: 12px;
      line-height: 1.55;
      text-align: left;
    }

    .register-auth-card .signup-foot a {
      color: var(--auth-ink);
      font-weight: 760;
      text-decoration: none;
    }

    .register-auth-card .signup-terms a {
      color: var(--auth-ink);
      font-weight: 760;
      text-decoration: none;
    }

    .register-auth-card .signup-foot a:hover,
    .register-auth-card .signup-terms a:hover {
      color: #087c73;
    }

    @media (max-width: 860px) {
      .register-landing-auth {
        margin: -42px -20px -70px;
        padding: 38px 16px 0;
      }

      .register-auth-header .auth-brand {
        transform: translate(36px, 11px);
      }

      .auth-brand-logo {
        width: 168px;
      }

      .register-auth-header .register-nav {
        position: absolute;
        top: 12px;
        right: 0;
        justify-self: end;
        align-self: start;
      }

      .register-auth-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        justify-content: stretch;
        padding: 28px 0 34px;
      }

      .register-auth-copy {
        padding-bottom: 0;
      }

      .register-auth-copy h1 {
        font-size: clamp(38px, 11vw, 54px);
      }

      .register-auth-card {
        width: 100%;
        padding: 28px;
      }
    }

    /* Auth verification and pre-send human check: final light editorial pass. */
    .verify-auth-hero {
      grid-template-columns: minmax(0, 480px) minmax(360px, 420px);
    }

    .verify-auth-copy p {
      max-width: 27ch;
    }

    .verify-card .signup-head {
      margin-bottom: 30px;
    }

    .verify-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 14px;
    }

    .verify-card .verify-title-row h2 {
      margin: 0;
      display: flex;
      min-height: 34px;
      align-items: center;
      line-height: 34px;
    }

    .verify-back {
      display: inline-grid;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      place-items: center;
      margin: 0;
      border: 1px solid var(--auth-line-strong);
      border-radius: 0;
      background: transparent;
      color: var(--auth-ink);
      box-shadow: none;
    }

    .verify-back:hover {
      border-color: #087c73;
      background: #ffffff;
      color: #087c73;
    }

    .verify-back .icon {
      width: 16px;
      height: 16px;
    }

    .email-pill {
      display: inline;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--auth-ink);
      font-weight: 760;
      word-break: break-all;
    }

    .verify-card .otp-cells {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) 16px repeat(3, minmax(0, 1fr));
      align-items: center;
      gap: 8px;
      max-width: none;
      margin: 0 0 20px;
    }

    .verify-card .otp-separator {
      width: 16px;
      height: 1px;
      border-radius: 0;
      background: var(--auth-line-strong);
    }

    .verify-card .otp-cells input {
      width: 100%;
      min-width: 0;
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid var(--auth-line-strong);
      border-radius: 0;
      background: #ffffff;
      color: var(--auth-ink);
      font-family: Georgia, "Times New Roman", "Noto Serif TC", "Source Han Serif TC", serif;
      font-size: 24px;
      font-weight: 760;
      line-height: 1;
      text-align: center;
      outline: 0;
      box-shadow: none;
    }

    .verify-card .otp-cells input:focus {
      border-color: var(--auth-focus);
      box-shadow: 0 0 0 3px rgba(8, 124, 115, 0.12);
    }

    .verify-card .verify-secondary {
      width: 100%;
      min-height: 44px;
      margin-top: 10px;
      border: 1px solid var(--auth-line-strong);
      border-radius: 0;
      background: transparent;
      color: var(--auth-ink);
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 14px;
      font-weight: 760;
      text-decoration: none;
      box-shadow: none;
    }

    .verify-card .verify-secondary:hover {
      border-color: #087c73;
      color: #087c73;
    }

    .verify-card .verify-secondary:disabled {
      border-color: var(--auth-line);
      color: var(--auth-muted);
      cursor: not-allowed;
    }

    .verify-card .signup-foot {
      margin-top: 14px;
      color: var(--auth-muted);
      font-size: 12px;
      line-height: 1.55;
      text-align: left;
    }

    .modal-panel.human-check-panel {
      width: min(430px, calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      padding: 28px;
      border: 1px solid rgba(13, 37, 61, 0.18);
      border-radius: 0;
      background: #f8fffc;
      color: #101318;
      box-shadow: 0 24px 64px rgba(13, 37, 61, 0.14);
    }

    .human-check-kicker {
      margin: 0 0 12px;
      color: rgba(16, 19, 24, 0.5);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 12px;
      font-style: italic;
      line-height: 1;
    }

    .human-check-panel h2 {
      margin: 0;
      color: #101318;
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 26px;
      font-weight: 760;
      line-height: 1.18;
      letter-spacing: 0;
    }

    .human-check-panel p {
      margin: 10px 0 18px;
      color: rgba(16, 19, 24, 0.62);
      font-size: 14px;
      line-height: 1.6;
    }

    .human-check-status {
      min-height: 18px;
      margin: 0 0 12px;
      color: rgba(16, 19, 24, 0.5);
      font-size: 13px;
      line-height: 1.45;
      text-align: left;
    }

    .human-check-widget {
      display: grid;
      min-width: 0;
      min-height: 0;
      place-items: center;
      overflow: hidden;
    }

    .human-check-widget:empty::before {
      display: none;
    }

    .human-check-manual {
      display: block;
    }

    .human-check-manual[hidden] {
      display: none;
    }

    .human-check-box {
      display: grid;
      width: 100%;
      min-height: 58px;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      padding: 0 16px;
      border: 1px solid rgba(13, 37, 61, 0.28);
      border-radius: 0;
      background: #ffffff;
      color: #101318;
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      text-align: left;
      box-shadow: none;
      cursor: pointer;
    }

    .human-check-box span {
      display: block;
      width: 24px;
      height: 24px;
      border: 1px solid rgba(13, 37, 61, 0.38);
      background:
        linear-gradient(135deg, transparent 0 45%, rgba(8, 124, 115, 0.18) 45% 56%, transparent 56%),
        #ffffff;
    }

    .human-check-box strong {
      font-size: 15px;
      font-weight: 760;
      line-height: 1.2;
    }

    .human-check-box:hover {
      border-color: #087c73;
      color: #087c73;
    }

    .human-check-cancel {
      width: 100%;
      min-height: 42px;
      margin-top: 12px;
      border: 1px solid rgba(13, 37, 61, 0.18);
      border-radius: 0;
      background: transparent;
      color: rgba(16, 19, 24, 0.68);
      font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", Georgia, serif;
      font-size: 14px;
      font-weight: 760;
      box-shadow: none;
      cursor: pointer;
    }

    .human-check-cancel:hover {
      border-color: rgba(13, 37, 61, 0.34);
      color: #101318;
    }

    @media (max-width: 860px) {
      .verify-auth-hero {
        grid-template-columns: 1fr;
      }

      .verify-card .otp-cells {
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 12px repeat(3, minmax(0, 1fr));
      }

      .verify-card .otp-separator {
        width: 12px;
      }

      .modal-panel.human-check-panel {
        padding: 24px;
      }
    }

    /* Keep the signed-in console aligned with the editorial serif system used by the public/auth screens. */
    body,
    button,
    input,
    textarea,
    select,
    .page,
    .card,
    .btn,
    .nav-item,
    .menu-choice,
    .menu-action,
    .badge,
    .table-wrap,
    .account-menu,
    .modal-panel {
      font-family: var(--font-serif);
    }

    code,
    pre,
    .code-block,
    .copy-field code,
    [data-base-url],
    .recent-activity-cost {
      font-family: var(--mono);
    }