:root {
  color-scheme: light;
  --ui-sidebar-width: 248px;
  --ui-topbar-height: 72px;
  --ui-content-max: 1640px;
  --ui-gutter: clamp(16px, 2vw, 32px);
  --ui-bg-a: #9cebe2;
  --ui-bg-b: #dff6ec;
  --ui-bg-c: #bceee1;
  --ui-surface: #fff;
  --ui-surface-soft: #f5f8f8;
  --ui-text: #102631;
  --ui-muted: #71858d;
  --ui-border: #dce9e8;
  --ui-accent: #10cfdd;
  --ui-accent-2: #20e2b7;
  --ui-focus: #087ff5;
  --ui-radius-sm: 8px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 24px;
  --ui-shadow: 0 18px 48px rgba(24, 91, 84, .09);
  --ui-ease: 180ms cubic-bezier(.2, .8, .2, 1);
}

html { min-width: 320px; background: var(--ui-bg-b); }
body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(111, 238, 224, .92), transparent 34%),
    radial-gradient(circle at 94% 10%, rgba(53, 222, 206, .72), transparent 30%),
    linear-gradient(135deg, var(--ui-bg-a), var(--ui-bg-b) 72%, var(--ui-bg-c));
  color: var(--ui-text);
  font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 34%, transparent);
  outline-offset: 2px;
}

.ui-icon { display: block; flex: 0 0 auto; }
.sidebar {
  width: var(--ui-sidebar-width);
  padding: 24px 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.brand {
  min-height: 52px;
  padding: 0 12px 18px;
  gap: 12px;
  color: var(--ui-text);
}
.customer-brand-mark {
  position: relative;
  display: inline-block;
  width: 31px;
  height: 35px;
  flex: 0 0 31px;
}
.customer-brand-mark i {
  position: absolute;
  left: 3px;
  width: 25px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(120deg, #15c7e8, #24d5aa);
  transform: skewY(-27deg);
}
.customer-brand-mark i:nth-child(1) { top: 1px; }
.customer-brand-mark i:nth-child(2) { top: 12px; opacity: .82; }
.customer-brand-mark i:nth-child(3) { top: 23px; opacity: .62; }
.brand strong { font-size: 23px; font-style: normal; letter-spacing: -.03em; }
.dashboard-overview-page .sidebar .brand {
  width: auto;
  min-height: 52px;
  height: auto;
  margin: 0 0 28px 12px;
  padding: 0;
  justify-content: flex-start;
  gap: 12px;
  border-radius: 0;
  background: transparent;
  color: #10233f;
}
.dashboard-overview-page .sidebar .brand .customer-brand-mark { display: inline-block; }
.dashboard-overview-page .sidebar .brand strong {
  color: #10233f;
  font-size: 23px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}
.sidebar-balance {
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--ui-radius-lg);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 36px rgba(31, 111, 101, .08);
  backdrop-filter: blur(16px);
}
.sidebar-balance footer { background: transparent; }
.side-nav { gap: 6px; }
.side-nav a {
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  color: #28464c;
  font-size: 15px;
  font-weight: 550;
  transition: background var(--ui-ease), color var(--ui-ease), transform var(--ui-ease);
}
.side-nav a span { display: grid; place-items: center; width: 22px; font-size: inherit; }
.side-nav a:hover { transform: translateX(2px); }
.side-nav a.active {
  background: rgba(255,255,255,.9);
  color: #091b20;
  font-weight: 750;
  box-shadow: 0 8px 26px rgba(31, 111, 101, .08);
}
.app-shell { margin-left: var(--ui-sidebar-width); min-width: 0; }
.topbar {
  height: var(--ui-topbar-height);
  padding: 0 var(--ui-gutter);
  background: rgba(255,255,255,.12);
  border: 0;
  backdrop-filter: blur(14px);
}
.menu-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  color: var(--ui-text);
  transition: background var(--ui-ease);
}
.menu-button:hover { background: rgba(255,255,255,.62); }
.workspace { width: 100%; max-width: var(--ui-content-max); padding: 20px var(--ui-gutter) 48px; }
.surface {
  border: 1px solid rgba(220, 233, 232, .72);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}
.sidebar-scrim { display: none; }

@media (max-width: 1100px) {
  :root { --ui-sidebar-width: 220px; --ui-gutter: 20px; }
}

@media (max-width: 760px) {
  :root { --ui-topbar-height: 64px; --ui-gutter: 14px; }
  body.nav-open { overflow: hidden; }
  .app-shell { margin-left: 0; }
  .sidebar {
    width: min(310px, 86vw);
    padding-top: 18px;
    background: linear-gradient(155deg, #a5eee5, #dff6e8);
    box-shadow: 22px 0 60px rgba(7, 37, 38, .2);
    transition: transform var(--ui-ease);
  }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: block;
    border: 0;
    background: rgba(6, 30, 31, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-ease);
  }
  .sidebar-scrim.visible { opacity: 1; pointer-events: auto; }
  .topbar { position: sticky; background: rgba(213, 246, 238, .76); }
  .workspace { padding-top: 12px; padding-bottom: 32px; }
  .surface { border-radius: 18px; }
}

@media (max-width: 390px) {
  .side-nav a { min-height: 48px; }
  .sidebar-balance { padding: 17px; }
}

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

/* Core customer pages: scoped stabilization layer. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  clip-path: none;
  background: #0a181b;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

/* Overview */
.dashboard-overview-page .overview-replica-layout,
.dashboard-overview-page .overview-replica-main,
.dashboard-overview-page .overview-proxy-content,
.dashboard-overview-page .overview-replica-side { min-width: 0; }
.dashboard-overview-page .overview-replica-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 338px);
  gap: 24px;
}
.dashboard-overview-page .overview-mode-card { height: 175px; min-height: 175px; }
.dashboard-overview-page .overview-mode { min-width: 0; }
.dashboard-overview-page .overview-mode strong { overflow-wrap: anywhere; }
.dashboard-overview-page .overview-profile-card .profile-action {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 14px;
  background: #f5f8f8;
  font-weight: 700;
}
.dashboard-overview-page .overview-residence-table { max-width: 100%; }

/* Purchased proxy list */
.dashboard-table-page .proxy-list-card { min-width: 0; }
.dashboard-table-page .proxy-toolbar { align-items: stretch; }
.dashboard-table-page .proxy-filter-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, .75fr) auto auto;
  min-width: 0;
}
.dashboard-table-page .proxy-filter-row input,
.dashboard-table-page .proxy-filter-row select { width: 100%; min-width: 0; }
.dashboard-table-page .proxy-bulk-actions { flex-wrap: wrap; }
.dashboard-table-page .proxy-table-scroll {
  max-width: 100%;
}
.dashboard-table-page .proxy-list-table { min-width: 1320px; }
.dashboard-table-page .proxy-list-table tbody tr:hover { background: #f8fcfb; }

/* Legacy purchase page now shares the same shell and spacing system. */
.purchase-workspace { width: 100%; max-width: var(--ui-content-max); }
.purchase-layout { align-items: start; }
.purchase-main,
.inventory-panel,
.order-summary { min-width: 0; }
.option-strip,
.inventory-panel,
.line-network-panel,
.order-summary { border-color: rgba(220, 233, 232, .9); box-shadow: var(--ui-shadow); }
.city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.city-card { overflow: hidden; }
.city-copy strong,
.city-copy small { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.order-summary { scrollbar-width: thin; }

@media (max-width: 1279px) {
  .dashboard-overview-page .overview-replica-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .dashboard-table-page .proxy-toolbar { display: block; }
  .dashboard-table-page .proxy-bulk-actions { justify-content: flex-start; margin-top: 12px; }
}

@media (max-width: 1020px) {
  .dashboard-overview-page .overview-replica-layout { grid-template-columns: 1fr; }
  .dashboard-overview-page .overview-mode-card { height: auto; min-height: 154px; }
  .dashboard-overview-page .overview-replica-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-overview-page .overview-profile-card { grid-column: 1 / -1; }
  .purchase-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; max-height: none; }
}

@media (max-width: 760px) {
  .brand-mark { width: 38px; height: 38px; }
  .dashboard-overview-page .overview-replica-side { grid-template-columns: 1fr; }
  .dashboard-overview-page .overview-profile-card { grid-column: auto; }
  .dashboard-overview-page .overview-mode-card { grid-template-columns: 1fr; gap: 8px; }
  .dashboard-overview-page .overview-mode:first-child { border-right: 0 !important; }

  .dashboard-table-page .proxy-filter-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dashboard-table-page .proxy-table-scroll { overflow: visible; border: 0; }
  .dashboard-table-page .proxy-list-table,
  .dashboard-table-page .proxy-list-table tbody,
  .dashboard-table-page .proxy-list-table tr,
  .dashboard-table-page .proxy-list-table td { display: block; width: 100%; min-width: 0; }
  .dashboard-table-page .proxy-list-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .dashboard-table-page .proxy-list-table tbody { display: grid; gap: 12px; }
  .dashboard-table-page .proxy-list-table tr {
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 91, 84, .06);
  }
  .dashboard-table-page .proxy-list-table td {
    display: grid;
    grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #edf3f2;
    overflow-wrap: anywhere;
  }
  .dashboard-table-page .proxy-list-table td:last-child { border-bottom: 0; }
  .dashboard-table-page .proxy-list-table td:nth-child(1)::before { content: "选择"; }
  .dashboard-table-page .proxy-list-table td:nth-child(2)::before { content: "IP 地址"; }
  .dashboard-table-page .proxy-list-table td:nth-child(3)::before { content: "端口"; }
  .dashboard-table-page .proxy-list-table td:nth-child(4)::before { content: "账号"; }
  .dashboard-table-page .proxy-list-table td:nth-child(5)::before { content: "密码"; }
  .dashboard-table-page .proxy-list-table td:nth-child(6)::before { content: "国家-城市"; }
  .dashboard-table-page .proxy-list-table td:nth-child(7)::before { content: "剩余天数"; }
  .dashboard-table-page .proxy-list-table td:nth-child(8)::before { content: "购买/到期"; }
  .dashboard-table-page .proxy-list-table td:nth-child(9)::before { content: "用户备注"; }
  .dashboard-table-page .proxy-list-table td:nth-child(10)::before { content: "状态"; }
  .dashboard-table-page .proxy-list-table td:nth-child(11)::before { content: "操作"; }
  .dashboard-table-page .proxy-list-table td::before { color: var(--ui-muted); font-weight: 700; }
  .dashboard-table-page .proxy-list-table td[colspan] { display: block; padding: 0; }
  .dashboard-table-page .proxy-list-table td[colspan]::before { content: none; }
  .dashboard-table-page .proxy-row-actions { flex-wrap: wrap; }
  .dashboard-table-page .proxy-pagination label { margin-left: 0; }

  .purchase-workspace { padding-inline: var(--ui-gutter); }
  .city-grid { grid-template-columns: 1fr; }
  .order-summary { padding: 18px; }
}

@media (max-width: 480px) {
  .dashboard-table-page .proxy-filter-row { grid-template-columns: 1fr; }
  .dashboard-table-page .proxy-filter-row button { width: 100%; }
  .dashboard-table-page .proxy-bulk-actions { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .dashboard-table-page .proxy-bulk-actions button { width: 100%; }
  .dashboard-table-page .proxy-list-table td { grid-template-columns: 82px minmax(0, 1fr); }
  .option-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .option-strip > strong { grid-column: 1 / -1; }
}

/* Overview residence list — matched to the approved four-column reference. */
.dashboard-overview-page .overview-residence-card {
  min-height: 414px;
  padding: 0 0 22px;
  overflow: hidden;
  border-radius: 24px;
}
.dashboard-overview-page .overview-residence-card > h2 {
  display: flex;
  align-items: center;
  min-height: 104px;
  padding: 0 38px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.dashboard-overview-page .overview-residence-table { min-height: 246px; overflow: hidden; }
.dashboard-overview-page .overview-residence-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.dashboard-overview-page .overview-residence-table th {
  height: 64px;
  padding: 0 38px;
  background: #f7f9fa;
  color: #96a1b3;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.dashboard-overview-page .overview-residence-table th:nth-child(1) { width: 29%; }
.dashboard-overview-page .overview-residence-table th:nth-child(2) { width: 17%; }
.dashboard-overview-page .overview-residence-table th:nth-child(3) { width: 36%; }
.dashboard-overview-page .overview-residence-table th:nth-child(4) { width: 18%; }
.dashboard-overview-page .overview-residence-table td {
  height: 61px;
  padding: 0 38px;
  border-bottom: 1px solid #f0f3f4;
  color: #172333;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-overview-page .overview-residence-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-overview-page .residence-port { color: #00aecd; font-weight: 800; }
.dashboard-overview-page .residence-place { display: flex; align-items: center; gap: 10px; min-width: 0; color: #98a1b1; }
.dashboard-overview-page .residence-place > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dashboard-overview-page .residence-flag { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.dashboard-overview-page .residence-days { color: #00bf4f; font-weight: 800; }
.dashboard-overview-page .overview-more {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  margin: 17px auto 0;
  color: #00afcd;
  font-size: 14px;
  font-weight: 800;
}
.dashboard-overview-page .overview-more span { font-size: 23px; font-weight: 400; line-height: 1; }
.dashboard-overview-page .overview-residence-table td[colspan] { height: 183px; }

@media (max-width: 700px) {
  .dashboard-overview-page .overview-residence-card { min-height: 382px; }
  .dashboard-overview-page .overview-residence-card > h2 { min-height: 84px; padding: 0 20px; font-size: 20px; }
  .dashboard-overview-page .overview-residence-table { overflow-x: auto; }
  .dashboard-overview-page .overview-residence-table table { min-width: 620px; }
  .dashboard-overview-page .overview-residence-table th,
  .dashboard-overview-page .overview-residence-table td { padding-inline: 20px; }
}

/* Keep the drawer opaque at the same breakpoint as the React shell. */
@media (max-width: 1020px) {
  body.dashboard-overview-page.nav-open { overflow: hidden; }
  .dashboard-overview-page .sidebar {
    width: min(310px, 86vw);
    background: linear-gradient(155deg, #a5eee5, #dff6e8);
    box-shadow: 22px 0 60px rgba(7, 37, 38, .2);
  }
  .dashboard-overview-page .sidebar-balance { width: auto; }
  .dashboard-overview-page .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: block;
    border: 0;
    background: rgba(6, 30, 31, .42);
    opacity: 0;
    pointer-events: none;
  }
  .dashboard-overview-page .sidebar-scrim.visible { opacity: 1; pointer-events: auto; }
}

/* Scroll within the card when the desktop sidebar leaves a narrow main column. */
.dashboard-overview-page .overview-residence-table { overflow-x: auto; }
.dashboard-overview-page .overview-residence-table table { min-width: 620px; }
.dashboard-overview-page .overview-profile-card > div { min-width: 0; }
.dashboard-overview-page .overview-profile-card strong,
.account-popover strong { overflow-wrap: anywhere; }
.account-popover { max-width: calc(100vw - 28px); }

/* Short screens and on-screen keyboards must not hide dialog actions. */
.react-modal-backdrop { overflow-y: auto; }
.react-secret-dialog,
.create-key-dialog {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  min-width: 0;
}
.react-secret-dialog { display: flow-root; }
.purchase-flow-dialog { max-height: calc(100dvh - 28px); overflow-y: auto; }
.purchase-processing-card code,
.purchase-confirm-facts dd { max-width: 100%; overflow-wrap: anywhere; }
.dashboard-overview-page .sidebar-balance { width: auto; }
.dashboard-overview-page .overview-welcome h1 { overflow-wrap: anywhere; }
.note-dialog { max-height: calc(100dvh - 40px); overflow-y: auto; }