/* ==========================================================================
   LavaRock · Desktop Grok layout
   Class names / IDs preserved for app.js — core logic untouched
   ========================================================================== */

@import url('https://fonts.loli.net/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --color-primary: #fafafa;
  --color-primary-light: rgba(255, 255, 255, 0.08);
  --color-success: #34d399;
  --color-success-light: rgba(52, 211, 153, 0.12);
  --color-warning: #fbbf24;
  --color-warning-light: rgba(251, 191, 36, 0.12);
  --color-danger: #f87171;
  --color-danger-light: rgba(248, 113, 113, 0.12);

  --color-text-dark: #f5f5f5;
  --color-text-muted: #a1a1aa;
  --color-text-light: #71717a;

  --color-bg-light: #0a0a0a;
  --color-bg-card: #111113;
  --color-border: rgba(255, 255, 255, 0.08);

  --gradient-blue: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1d4ed8 140%);
  --gradient-green: linear-gradient(135deg, #064e3b, #10b981);
  --gradient-purple: linear-gradient(135deg, #4c1d95, #8b5cf6);
  --gradient-orange: linear-gradient(135deg, #9a3412, #f97316);

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --sidebar-w: 260px;
  --header-h: 64px;
  --content-max: 1120px;
}

/* ==========================================================================
   LavaRock One shell — Google One-style product skin
   Scope: visual shell only. Existing IDs, routes, buttons and JS data-actions stay intact.
   ========================================================================== */

:root {
  --one-blue: #1a73e8;
  --one-blue-hover: #1765cc;
  --one-blue-soft: #e8f0fe;
  --one-blue-wash: #f3f7ff;
  --one-green: #188038;
  --one-green-soft: #e6f4ea;
  --one-yellow: #fbbc04;
  --one-yellow-soft: #fef7e0;
  --one-red: #d93025;
  --one-red-soft: #fce8e6;
  --one-text: #202124;
  --one-muted: #5f6368;
  --one-subtle: #80868b;
  --one-line: #dadce0;
  --one-line-soft: #eef0f3;
  --one-page: #f8fafd;
  --one-card: #ffffff;
  --one-radius-xl: 32px;
  --one-radius-lg: 24px;
  --one-radius-md: 18px;
  --one-shadow-hover: 0 8px 24px rgba(60, 64, 67, 0.12);
}

html,
body,
.desktop-app {
  background: var(--one-page) !important;
  color: var(--one-text) !important;
  font-family: "Google Sans", "Product Sans", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body::before,
body::after,
.app-container::before,
.app-container::after {
  display: none !important;
}

.app-container {
  background:
    radial-gradient(780px 420px at 50% -140px, rgba(232, 240, 254, 0.98), rgba(248, 250, 253, 0) 72%),
    var(--one-page) !important;
}

.app-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 64px 64px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: transparent !important;
}

.app-header {
  grid-row: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 620px) minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
  height: 64px !important;
  padding: 0 28px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--one-line-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.header-btn[data-action="open-sidebar"] {
  display: none !important;
}

.header-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  color: var(--one-text) !important;
}

.brand-logo-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.google-wordmark {
  display: none !important;
}

.product-wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #5f6368 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

.product-wordmark::first-letter {
  color: var(--one-text);
}

.header-search {
  justify-self: center !important;
  width: min(100%, 620px) !important;
  height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 23px !important;
  background: #f1f3f4 !important;
  color: var(--one-muted) !important;
  box-shadow: none !important;
}

.header-search span {
  font-size: 0 !important;
}

.header-search span::before {
  content: "搜索订阅、节点和订单";
  font-size: 14px;
}

.header-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.header-status-pill {
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--one-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.header-status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--one-green);
  display: inline-block;
}

.header-btn {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--one-muted) !important;
}

.header-btn:hover {
  background: #f1f3f4 !important;
  color: var(--one-text) !important;
}

.sidebar-overlay {
  grid-row: 2 !important;
  position: sticky !important;
  top: 64px !important;
  z-index: 70 !important;
  display: block !important;
  height: 64px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--one-line-soft) !important;
  pointer-events: auto !important;
  backdrop-filter: blur(14px) !important;
}

.sidebar-backdrop,
.sidebar-header,
.sidebar-footer {
  display: none !important;
}

.sidebar-drawer {
  width: min(1180px, calc(100vw - 48px)) !important;
  height: 64px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  height: 64px !important;
  padding: 0 !important;
}

.sidebar-menu-item {
  position: relative !important;
  width: auto !important;
  min-width: 96px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--one-muted) !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

.sidebar-menu-item span {
  display: none !important;
}

.sidebar-menu-item[data-route="home"]::after { content: "首页"; }
.sidebar-menu-item[data-route="subscription"]::after { content: "订阅"; }
.sidebar-menu-item[data-route="store"]::after { content: "套餐"; }
.sidebar-menu-item[data-route="account"]::after { content: "账户"; }
.sidebar-menu-item[data-action="sign-out"]::after { content: "退出"; }

.sidebar-menu-item::after {
  font-size: 14px;
  white-space: nowrap;
}

.sidebar-menu-item svg {
  width: 20px !important;
  height: 20px !important;
}

.sidebar-menu-item:hover {
  background: #f1f3f4 !important;
  color: var(--one-text) !important;
}

.sidebar-menu-item.is-active {
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
}

.sidebar-menu-item[data-action="sign-out"] {
  margin-left: auto !important;
  color: var(--one-red) !important;
}

.app-main {
  grid-row: 3 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 48px 24px 96px !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.view {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  gap: 24px !important;
}

.page-hero {
  position: relative !important;
  min-height: 176px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.page-hero::before {
  content: "";
  position: absolute;
  right: 0;
  top: -16px;
  width: 286px;
  height: 156px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 46%, rgba(66, 133, 244, 0.25) 0 18%, transparent 19%),
    radial-gradient(circle at 48% 32%, rgba(251, 188, 4, 0.26) 0 16%, transparent 17%),
    radial-gradient(circle at 68% 52%, rgba(52, 168, 83, 0.24) 0 18%, transparent 19%),
    radial-gradient(circle at 84% 36%, rgba(234, 67, 53, 0.18) 0 13%, transparent 14%);
  filter: blur(2px);
  opacity: 0.85;
  pointer-events: none;
}

.page-kicker {
  display: inline-flex !important;
  height: 32px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.page-hero h1,
.page-hero p {
  font-size: 0 !important;
}

.view[data-view="home"] .page-hero h1::before {
  content: "一个账号，管理你的专属网络";
}

.view[data-view="subscription"] .page-hero h1::before {
  content: "订阅与节点";
}

.view[data-view="store"] .page-hero h1::before {
  content: "选择适合你的会员方案";
}

.view[data-view="account"] .page-hero h1::before {
  content: "你的账号";
}

.page-hero h1::before {
  display: block;
  margin-top: 18px;
  color: var(--one-text);
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 500;
}

.view[data-view="home"] .page-hero p::before {
  content: "像管理 Google One 会员一样管理 VPN：订阅、流量、节点和账单都在一个清爽页面里。";
}

.view[data-view="subscription"] .page-hero p::before {
  content: "复制订阅链接、导入客户端、查看全部可用节点。底层订阅逻辑保持不变。";
}

.view[data-view="store"] .page-hero p::before {
  content: "按速度、流量和使用场景选择会员。购买流程保持原来的后端逻辑。";
}

.view[data-view="account"] .page-hero p::before {
  content: "查看余额、订单、安全设置和服务支持。";
}

.page-hero p::before {
  display: block;
  max-width: 680px;
  margin-top: 14px;
  color: var(--one-muted);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.01em;
}

.page-hero-action {
  position: relative !important;
  z-index: 1 !important;
  height: 44px !important;
  margin-top: 42px !important;
  padding: 0 22px !important;
  border-radius: 22px !important;
}

.card,
.gradient-banner,
.profile-banner,
.profile-stat-card,
.menu-list-item,
.support-card,
.store-hero,
.store-hint,
.plan-compare-wrap,
.extra-traffic-panel,
.m-plan-card,
.modal-card {
  background: var(--one-card) !important;
  border: 1px solid var(--one-line) !important;
  border-radius: var(--one-radius-lg) !important;
  box-shadow: none !important;
  color: var(--one-text) !important;
}

.card:hover,
.m-plan-card:hover,
.menu-list-item:hover,
.tutorial-card:hover {
  box-shadow: var(--one-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.view[data-view="home"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr) !important;
  grid-template-areas:
    "hero hero"
    "membership actions"
    "membership notice"
    "orders notice"
    "foot foot" !important;
  align-items: start !important;
}

.view[data-view="home"] > .page-hero { grid-area: hero !important; }
.view[data-view="home"] > .gradient-banner { grid-area: membership !important; }
.view[data-view="home"] > .actions-grid { grid-area: actions !important; }
.view[data-view="home"] > .card:nth-of-type(2) { grid-area: notice !important; }
.view[data-view="home"] > .card:nth-of-type(3) { grid-area: orders !important; }
.view[data-view="home"] > .screen-footer { grid-area: foot !important; }

.gradient-banner {
  position: relative !important;
  min-height: 430px !important;
  padding: 32px !important;
  overflow: hidden !important;
}

.gradient-banner::before {
  content: "";
  position: absolute;
  inset: auto -52px -82px auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background:
    conic-gradient(from 180deg, var(--one-blue), #8ab4f8, var(--one-green), var(--one-yellow), var(--one-red), var(--one-blue));
  opacity: 0.11;
}

.gradient-banner::after {
  content: "One";
  position: absolute;
  right: 34px;
  bottom: 22px;
  color: rgba(26, 115, 232, 0.08);
  font-size: 108px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.08em;
}

.banner-header,
.banner-meta,
.banner-footer-stats,
.banner-traffic-info,
.banner-traffic-tip,
.progress-bar-container {
  position: relative;
  z-index: 1;
}

.banner-title {
  color: var(--one-text) !important;
  font-size: clamp(36px, 4.8vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  font-weight: 500 !important;
}

.banner-title::before {
  content: "当前会员：";
  display: block;
  margin-bottom: 14px;
  color: var(--one-muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.banner-meta {
  margin-top: 18px !important;
  color: var(--one-muted) !important;
}

.badge-green,
.badge-success {
  background: var(--one-green-soft) !important;
  color: var(--one-green) !important;
  border: 0 !important;
}

.badge-orange-light {
  background: var(--one-yellow-soft) !important;
  color: #8f6400 !important;
  border: 0 !important;
}

.banner-traffic-info {
  margin-top: 34px !important;
  color: var(--one-muted) !important;
}

.banner-traffic-info strong,
#home-traffic-percent {
  color: var(--one-text) !important;
}

.progress-bar-container {
  height: 10px !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  background: #eef0f3 !important;
}

.progress-bar-fill {
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--one-blue), #34a853) !important;
  box-shadow: none !important;
}

.banner-traffic-tip {
  margin-top: 14px !important;
  color: var(--one-muted) !important;
  font-size: 14px !important;
}

.banner-footer-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 30px !important;
}

.banner-stat-item {
  min-height: 78px !important;
  padding: 16px !important;
  border: 1px solid var(--one-line-soft) !important;
  border-radius: 18px !important;
  background: #fafbff !important;
  color: var(--one-muted) !important;
}

.actions-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.action-btn {
  min-height: 82px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--one-line) !important;
  border-radius: var(--one-radius-lg) !important;
  background: #fff !important;
  color: var(--one-text) !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  font-size: 0 !important;
}

.action-btn:nth-child(1)::after { content: "复制订阅"; }
.action-btn:nth-child(2)::after { content: "导入教程"; }
.action-btn:nth-child(3)::after { content: "购买套餐"; }
.action-btn:nth-child(4)::after { content: "服务公告"; }

.action-btn::after {
  font-size: 16px;
  font-weight: 500;
}

.action-btn svg {
  width: 38px !important;
  height: 38px !important;
  padding: 9px;
  border-radius: 50%;
  background: var(--one-blue-soft);
  color: var(--one-blue);
}

.action-btn:nth-child(2) svg { background: var(--one-green-soft); color: var(--one-green); }
.action-btn:nth-child(3) svg { background: var(--one-yellow-soft); color: #8f6400; }
.action-btn:nth-child(4) svg { background: var(--one-red-soft); color: var(--one-red); }

.card {
  padding: 24px !important;
}

.card-title-row h3,
.plan-compare-head h3,
.extra-traffic-head h3 {
  color: var(--one-text) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.card-title-link {
  color: var(--one-blue) !important;
  font-weight: 500 !important;
}

.list-item,
.order-card-item {
  border-radius: 18px !important;
  border: 1px solid var(--one-line-soft) !important;
  background: #fff !important;
}

.sub-tab-bar {
  position: sticky !important;
  top: 128px !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 28px !important;
  padding: 0 !important;
  margin: -18px 0 6px !important;
  border-bottom: 1px solid var(--one-line) !important;
  background: rgba(248, 250, 253, 0.94) !important;
  backdrop-filter: blur(12px) !important;
}

.sub-tab-item {
  height: 48px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--one-muted) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

.sub-tab-item:nth-child(1)::after { content: "订阅信息"; }
.sub-tab-item:nth-child(2)::after { content: "节点列表"; }
.sub-tab-item:nth-child(3)::after { content: "订阅设置"; }
.sub-tab-item::after { font-size: 14px; }

.sub-tab-item.is-active {
  color: var(--one-blue) !important;
  box-shadow: inset 0 -3px 0 var(--one-blue) !important;
}

.sub-scroll-content-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-areas:
    "info tutorial"
    "nodes nodes" !important;
  gap: 24px !important;
}

#scroll-section-info { grid-area: info !important; }
#scroll-section-tutorial { grid-area: tutorial !important; }
#scroll-section-nodes { grid-area: nodes !important; }

.link-display-box {
  height: 56px !important;
  border-radius: 16px !important;
  border: 1px solid var(--one-line) !important;
  background: #f8fafd !important;
}

.link-input {
  color: var(--one-text) !important;
}

.link-buttons-row {
  gap: 12px !important;
}

.tutorial-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.tutorial-card {
  min-height: 76px !important;
  padding: 16px !important;
  border: 1px solid var(--one-line-soft) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--one-text) !important;
}

.filter-row,
.m-level-scroll {
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.filter-btn,
.m-chip {
  height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--one-muted) !important;
  font-weight: 500 !important;
}

.filter-btn.is-selected,
.m-chip.is-active {
  border-color: transparent !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
}

.node-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.node-table th {
  background: #f8fafd !important;
  color: var(--one-muted) !important;
  font-weight: 500 !important;
}

.node-table td {
  border-top: 1px solid var(--one-line-soft) !important;
  color: var(--one-text) !important;
}

.store-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  padding: 28px !important;
  background:
    radial-gradient(360px 180px at 12% -20%, rgba(26, 115, 232, 0.12), transparent 70%),
    #fff !important;
}

.store-hero-text strong {
  color: var(--one-text) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
}

.store-hero-text span,
.store-hint,
.m-plan-desc,
.plan-benefit-caption,
.plan-compare-head p,
.extra-traffic-head p {
  color: var(--one-muted) !important;
}

.store-balance-chip {
  height: 42px !important;
  border-radius: 21px !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
  border: 0 !important;
}

.m-plan-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.m-plan-card {
  position: relative !important;
  min-height: 410px !important;
  padding: 28px !important;
  overflow: hidden !important;
}

.m-plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--one-blue);
  opacity: 0;
}

.m-plan-card:nth-child(2)::before { background: var(--one-green); }
.m-plan-card:nth-child(3)::before { background: var(--one-yellow); }

.m-plan-card.is-selected {
  border-color: var(--one-blue) !important;
  box-shadow: inset 0 0 0 1px var(--one-blue) !important;
}

.m-plan-card.is-selected::before {
  opacity: 1;
}

.m-plan-name {
  color: var(--one-text) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

.m-plan-price {
  color: var(--one-text) !important;
  letter-spacing: -0.055em !important;
}

.m-plan-price b {
  font-size: 44px !important;
  font-weight: 500 !important;
}

.m-lv,
.m-tag {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
}

.plan-benefit-table,
.plan-compare-table {
  color: var(--one-text) !important;
}

.m-buy-bar {
  left: 50% !important;
  right: auto !important;
  bottom: 22px !important;
  width: min(720px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 30px rgba(60, 64, 67, 0.16) !important;
}

.view[data-view="account"] {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  grid-template-areas:
    "hero hero"
    "profile stats"
    "profile menu"
    "support menu"
    "foot foot" !important;
  align-items: start !important;
}

.view[data-view="account"] > .page-hero { grid-area: hero !important; }
.view[data-view="account"] > .profile-banner { grid-area: profile !important; }
.view[data-view="account"] > .profile-stats-row { grid-area: stats !important; }
.view[data-view="account"] > .menu-list-grid { grid-area: menu !important; }
.view[data-view="account"] > .support-card { grid-area: support !important; }
.view[data-view="account"] > .screen-footer { grid-area: foot !important; }

.profile-banner {
  min-height: 360px !important;
  padding: 32px !important;
  background:
    radial-gradient(260px 180px at 86% 12%, rgba(26, 115, 232, 0.10), transparent 72%),
    #fff !important;
}

.avatar-large {
  width: 104px !important;
  height: 104px !important;
  background: var(--one-blue) !important;
  color: #fff !important;
  font-size: 40px !important;
}

.profile-info h2 {
  color: var(--one-text) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
}

.profile-info p,
.profile-stat-card small,
.menu-text-box small,
.support-text-details p {
  color: var(--one-muted) !important;
}

.profile-stats-row,
.menu-list-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.menu-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.profile-stat-card {
  min-height: 150px !important;
  padding: 22px !important;
}

.profile-stat-card strong {
  color: var(--one-text) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
}

.profile-stat-card span {
  color: var(--one-blue) !important;
  font-weight: 500 !important;
}

.menu-list-item {
  min-height: 112px !important;
  padding: 20px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}

.menu-icon-box,
.order-icon-box {
  background: var(--one-blue-soft) !important;
  color: var(--one-blue) !important;
  border-radius: 50% !important;
}

.menu-text-box strong {
  color: var(--one-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.primary-action,
.secondary-action,
.support-action-btn,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn {
  height: 40px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.primary-action,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn,
.support-action-btn {
  background: var(--one-blue) !important;
  border: 1px solid var(--one-blue) !important;
  color: #fff !important;
}

.primary-action:hover,
.m-buy-btn:hover,
.m-plan-cta:hover,
.store-primary-btn:hover,
.support-action-btn:hover {
  background: var(--one-blue-hover) !important;
  border-color: var(--one-blue-hover) !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.24) !important;
}

.secondary-action {
  background: #fff !important;
  border: 1px solid var(--one-line) !important;
  color: var(--one-blue) !important;
}

.modal-card {
  border-radius: 28px !important;
  box-shadow: 0 16px 46px rgba(60, 64, 67, 0.18) !important;
}

.screen-footer {
  color: var(--one-subtle) !important;
}

.m-tabbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--one-line-soft) !important;
  box-shadow: none !important;
}

.m-tab-item {
  color: var(--one-muted) !important;
}

.m-tab-item.is-active {
  color: var(--one-blue) !important;
}

@media (max-width: 1040px) {
  .view[data-view="home"],
  .view[data-view="account"],
  .sub-scroll-content-group {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }

  .view[data-view="home"] > *,
  .view[data-view="account"] > *,
  .sub-scroll-content-group > * {
    grid-area: auto !important;
  }

  .m-plan-list,
  .profile-stats-row,
  .menu-list-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .app-shell {
    grid-template-rows: 60px minmax(0, 1fr) auto !important;
  }

  .app-header {
    grid-template-columns: auto 1fr auto !important;
    height: 60px !important;
    padding: 0 14px !important;
  }

  .header-btn[data-action="open-sidebar"] {
    display: inline-grid !important;
  }

  .product-wordmark {
    font-size: 19px !important;
  }

  .header-search,
  .header-status-pill {
    display: none !important;
  }

  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    height: auto !important;
    background: rgba(32, 33, 36, 0.35) !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  .sidebar-overlay.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .sidebar-backdrop,
  .sidebar-header,
  .sidebar-footer {
    display: block !important;
  }

  .sidebar-backdrop {
    position: absolute !important;
    inset: 0 !important;
  }

  .sidebar-header {
    display: flex !important;
  }

  .sidebar-drawer {
    position: relative !important;
    width: min(86vw, 320px) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 0 28px 28px 0 !important;
    background: #fff !important;
    box-shadow: 0 16px 44px rgba(60, 64, 67, 0.24) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.22s ease !important;
  }

  .sidebar-overlay.is-open .sidebar-drawer {
    transform: translateX(0) !important;
  }

  .sidebar-menu {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 0 !important;
  }

  .sidebar-menu-item {
    width: 100% !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .sidebar-menu-item[data-action="sign-out"] {
    margin-left: 0 !important;
  }

  .app-main {
    grid-row: 2 !important;
    padding: 30px 16px 92px !important;
  }

  .page-hero {
    min-height: 0 !important;
    flex-direction: column !important;
  }

  .page-hero::before {
    width: 180px;
    height: 120px;
    opacity: 0.55;
  }

  .page-hero h1::before {
    font-size: 38px;
  }

  .page-hero p::before {
    font-size: 16px;
  }

  .page-hero-action {
    width: 100% !important;
    margin-top: 8px !important;
  }

  .gradient-banner {
    min-height: 0 !important;
    padding: 26px !important;
  }

  .banner-title {
    font-size: 36px !important;
  }

  .banner-footer-stats {
    grid-template-columns: 1fr !important;
  }

  .sub-tab-bar {
    top: 60px !important;
    overflow-x: auto !important;
    gap: 22px !important;
  }
}

/* TRUE FINAL MARKER: google-one-app-eof */

.view[data-view="home"] .page-hero h1,
.view[data-view="home"] .page-hero p,
.view[data-view="subscription"] .page-hero h1,
.view[data-view="subscription"] .page-hero p,
.view[data-view="store"] .page-hero h1,
.view[data-view="store"] .page-hero p,
.view[data-view="account"] .page-hero h1,
.view[data-view="account"] .page-hero p,
.header-search span,
.header-status-pill,
.action-btn,
.card-title-row h3,
.store-hero-text strong {
  font-size: 0 !important;
}

:root {
  --g1-blue: #1a73e8;
  --g1-green: #188038;
  --g1-yellow: #fbbc04;
  --g1-red: #d93025;
  --g1-ink: #202124;
  --g1-muted: #5f6368;
  --g1-bg: #f8fafd;
  --g1-line: #dadce0;
  --g1-soft-line: #edf0f5;
  --g1-blue-soft: #e8f0fe;
  --g1-green-soft: #e6f4ea;
  --g1-yellow-soft: #fef7e0;
  --g1-red-soft: #fce8e6;
}

html,
body,
.desktop-app,
.app-container,
.app-shell {
  background: var(--g1-bg) !important;
  color: var(--g1-ink) !important;
  font-family: "Google Sans", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body::before,
body::after,
.app-container::before,
.app-container::after,
.google-wordmark {
  display: none !important;
}

.app-container {
  background: radial-gradient(520px 280px at 54% -90px, rgba(232, 240, 254, .95), transparent 76%), var(--g1-bg) !important;
}

.app-shell {
  grid-template-rows: 64px 56px minmax(0, 1fr) !important;
}

.app-header {
  height: 64px !important;
  padding: 0 28px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.brand-logo-img {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.product-wordmark {
  color: #5f6368 !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}

.product-wordmark::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 4px solid var(--g1-blue);
  border-right-color: var(--g1-green);
  border-bottom-color: var(--g1-yellow);
  border-left-color: var(--g1-red);
  border-radius: 50%;
}

.header-search {
  height: 46px !important;
  border: 0 !important;
  border-radius: 23px !important;
  background: #f1f3f4 !important;
  box-shadow: none !important;
}

.header-search span::before {
  content: "搜索 Nova Access";
  color: var(--g1-muted);
  font-size: 14px;
}

.header-status-pill {
  border: 1px solid var(--g1-line) !important;
  background: #fff !important;
}

.header-status-pill::after {
  content: "会员中心";
  color: var(--g1-muted);
  font-size: 13px;
}

.sidebar-overlay {
  height: 56px !important;
  top: 64px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--g1-soft-line) !important;
}

.sidebar-drawer,
.sidebar-menu {
  height: 56px !important;
}

.sidebar-menu-item {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  color: var(--g1-muted) !important;
}

.sidebar-menu-item.is-active {
  background: var(--g1-blue-soft) !important;
  color: #174ea6 !important;
}

.app-main {
  padding: 34px 24px 96px !important;
  background: transparent !important;
}

.view {
  width: min(1100px, 100%) !important;
}

.page-hero {
  min-height: 142px !important;
  padding: 0 !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-hero::before {
  display: none !important;
}

.page-kicker {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--g1-blue) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.page-kicker::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 8px;
  margin-left: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g1-blue) 0 25%, var(--g1-red) 25% 50%, var(--g1-yellow) 50% 75%, var(--g1-green) 75% 100%);
}

.view[data-view="home"] .page-hero h1::before { content: "欢迎使用 Nova Access"; }
.view[data-view="subscription"] .page-hero h1::before { content: "订阅"; }
.view[data-view="store"] .page-hero h1::before { content: "方案"; }
.view[data-view="account"] .page-hero h1::before { content: "账号"; }

.page-hero h1::before {
  display: block;
  margin-top: 10px;
  color: var(--g1-ink);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.04em;
}

.view[data-view="home"] .page-hero p::before { content: "会员、订阅、节点和账单集中管理。"; }
.view[data-view="subscription"] .page-hero p::before { content: "复制订阅链接，查看节点和导入教程。"; }
.view[data-view="store"] .page-hero p::before { content: "升级会员方案或购买额外流量。"; }
.view[data-view="account"] .page-hero p::before { content: "管理余额、订单、安全和支持。"; }

.page-hero p::before {
  display: block;
  margin-top: 8px;
  color: var(--g1-muted);
  font-size: 16px;
  line-height: 1.65;
}

.view[data-view="home"] {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr) !important;
  grid-template-areas:
    "hero hero"
    "membership actions"
    "membership notice"
    "orders notice"
    "foot foot" !important;
  gap: 20px !important;
}

.card,
.gradient-banner,
.profile-banner,
.profile-stat-card,
.menu-list-item,
.support-card,
.store-hero,
.store-hint,
.plan-compare-wrap,
.extra-traffic-panel,
.m-plan-card,
.tutorial-card,
.link-display-box {
  border: 1px solid var(--g1-line) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--g1-ink) !important;
}

.gradient-banner {
  min-height: 392px !important;
  padding: 30px !important;
  background: radial-gradient(260px 210px at 86% 82%, rgba(26, 115, 232, .10), transparent 68%), #fff !important;
}

.gradient-banner::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 146px;
  height: 146px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 0 48%, transparent 49%), conic-gradient(var(--g1-blue) 0 46%, #edf0f5 46% 100%);
  border: 1px solid var(--g1-soft-line);
  opacity: 1;
}

.gradient-banner::before {
  content: "流量";
  position: absolute;
  right: 82px;
  bottom: 91px;
  z-index: 1;
  width: auto;
  height: auto;
  background: none;
  color: var(--g1-muted);
  font-size: 13px;
  opacity: 1;
}

.banner-title {
  color: var(--g1-ink) !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  letter-spacing: -.045em !important;
}

.banner-title::before {
  content: "当前方案";
  display: block;
  margin-bottom: 12px;
  color: var(--g1-blue);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.banner-meta,
.banner-traffic-info,
.banner-traffic-tip,
.store-hero-text span,
.store-hint,
.m-plan-desc,
.plan-benefit-caption,
.profile-info p,
.profile-stat-card small,
.menu-text-box small {
  color: var(--g1-muted) !important;
}

.progress-bar-container {
  height: 10px !important;
  border-radius: 999px !important;
  background: #edf0f5 !important;
}

.progress-bar-fill {
  border-radius: inherit !important;
  background: var(--g1-blue) !important;
}

.banner-footer-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 26px !important;
}

.banner-stat-item {
  min-height: 74px !important;
  padding: 14px !important;
  border: 1px solid var(--g1-soft-line) !important;
  border-radius: 20px !important;
  background: #fbfcff !important;
}

.actions-grid {
  gap: 12px !important;
}

.action-btn {
  min-height: 82px !important;
  padding: 18px !important;
  border: 1px solid var(--g1-line) !important;
  border-radius: 28px !important;
  background: #fff !important;
  color: var(--g1-ink) !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.action-btn:nth-child(1)::after { content: "复制订阅"; }
.action-btn:nth-child(2)::after { content: "导入教程"; }
.action-btn:nth-child(3)::after { content: "升级方案"; }
.action-btn:nth-child(4)::after { content: "公告与支持"; }
.action-btn::after {
  font-size: 16px;
  font-weight: 500;
}

.action-btn svg {
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
  border-radius: 50% !important;
  background: var(--g1-blue-soft) !important;
  color: var(--g1-blue) !important;
}

.action-btn:nth-child(2) svg { background: var(--g1-green-soft) !important; color: var(--g1-green) !important; }
.action-btn:nth-child(3) svg { background: var(--g1-yellow-soft) !important; color: #8f6400 !important; }
.action-btn:nth-child(4) svg { background: var(--g1-red-soft) !important; color: var(--g1-red) !important; }

.view[data-view="home"] > .card:nth-of-type(2) .card-title-row h3::before { content: "最新公告"; }
.view[data-view="home"] > .card:nth-of-type(3) .card-title-row h3::before { content: "最近订单"; }
#scroll-section-info .card-title-row h3::before { content: "订阅链接"; }
#scroll-section-tutorial .card-title-row h3::before { content: "导入客户端"; }
#scroll-section-nodes .card-title-row h3::before { content: "全部节点"; }
.card-title-row h3::before {
  color: var(--g1-ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.store-hero-text strong::before {
  content: "选择你的方案";
  color: var(--g1-ink);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.m-plan-card {
  min-height: 380px !important;
  padding: 26px !important;
}

.m-plan-card.is-selected {
  border-color: var(--g1-blue) !important;
  box-shadow: inset 0 0 0 1px var(--g1-blue) !important;
}

.m-plan-name {
  color: var(--g1-ink) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
}

.m-plan-price b {
  color: var(--g1-ink) !important;
  font-size: 42px !important;
  font-weight: 500 !important;
}

.primary-action,
.secondary-action,
.support-action-btn,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn {
  height: 40px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.primary-action,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn,
.support-action-btn {
  background: var(--g1-blue) !important;
  border: 1px solid var(--g1-blue) !important;
  color: #fff !important;
}

.secondary-action {
  background: #fff !important;
  border: 1px solid var(--g1-line) !important;
  color: var(--g1-blue) !important;
}

@media (max-width: 720px) {
  .app-main { padding-top: 26px !important; }
  .page-hero { min-height: auto !important; }
  .page-hero h1::before { font-size: 34px; }
  .gradient-banner { min-height: auto !important; }
  .gradient-banner::after,
  .gradient-banner::before { display: none !important; }
}

/* ==========================================================================
   FINAL-2: Google One app-style correction
   Less marketing page, more membership app. This pass intentionally avoids
   extra decorative sections and cleans visible text through CSS where legacy
   markup is noisy.
   ========================================================================== */

:root {
  --go2-blue: #1a73e8;
  --go2-green: #188038;
  --go2-yellow: #fbbc04;
  --go2-red: #d93025;
  --go2-ink: #202124;
  --go2-muted: #5f6368;
  --go2-subtle: #80868b;
  --go2-bg: #f8fafd;
  --go2-card: #fff;
  --go2-line: #dadce0;
  --go2-soft-line: #edf0f5;
  --go2-blue-soft: #e8f0fe;
  --go2-green-soft: #e6f4ea;
  --go2-yellow-soft: #fef7e0;
  --go2-red-soft: #fce8e6;
}

html,
body,
.desktop-app,
.app-container,
.app-shell {
  background: var(--go2-bg) !important;
  color: var(--go2-ink) !important;
  font-family: "Google Sans", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

.app-container {
  background:
    radial-gradient(520px 280px at 54% -90px, rgba(232, 240, 254, .95), transparent 76%),
    var(--go2-bg) !important;
}

.app-shell {
  grid-template-rows: 64px 56px minmax(0, 1fr) !important;
}

.app-header {
  height: 64px !important;
  padding: 0 28px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.brand-logo-img {
  border-radius: 8px !important;
}

.product-wordmark {
  color: #5f6368 !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}

.product-wordmark::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 4px solid var(--go2-blue);
  border-right-color: var(--go2-green);
  border-bottom-color: var(--go2-yellow);
  border-left-color: var(--go2-red);
  border-radius: 50%;
}

.header-search {
  height: 46px !important;
  background: #f1f3f4 !important;
  border: 0 !important;
  border-radius: 23px !important;
}

.header-search span {
  font-size: 0 !important;
}

.header-search span::before {
  content: "搜索 Nova Access";
  color: var(--go2-muted);
  font-size: 14px;
}

.header-status-pill {
  font-size: 0 !important;
  border: 1px solid var(--go2-line) !important;
  background: #fff !important;
}

.header-status-pill::after {
  content: "会员中心";
  color: var(--go2-muted);
  font-size: 13px;
}

.sidebar-overlay {
  height: 56px !important;
  top: 64px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--go2-soft-line) !important;
}

.sidebar-drawer,
.sidebar-menu {
  height: 56px !important;
}

.sidebar-menu-item {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  color: var(--go2-muted) !important;
}

.sidebar-menu-item.is-active {
  background: var(--go2-blue-soft) !important;
  color: #174ea6 !important;
}

.app-main {
  padding: 34px 24px 96px !important;
}

.view {
  width: min(1100px, 100%) !important;
}

.page-hero {
  min-height: 142px !important;
  padding: 0 !important;
  align-items: center !important;
}

.page-hero::before {
  display: none !important;
}

.page-kicker {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--go2-blue) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.page-kicker::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 8px;
  margin-left: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--go2-blue) 0 25%, var(--go2-red) 25% 50%, var(--go2-yellow) 50% 75%, var(--go2-green) 75% 100%);
}

.page-hero h1,
.page-hero p {
  font-size: 0 !important;
}

.view[data-view="home"] .page-hero h1::before { content: "欢迎使用 Nova Access"; }
.view[data-view="subscription"] .page-hero h1::before { content: "订阅"; }
.view[data-view="store"] .page-hero h1::before { content: "方案"; }
.view[data-view="account"] .page-hero h1::before { content: "账号"; }

.page-hero h1::before {
  display: block;
  margin-top: 10px;
  color: var(--go2-ink);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.04em;
}

.view[data-view="home"] .page-hero p::before { content: "会员、订阅、节点和账单集中管理。"; }
.view[data-view="subscription"] .page-hero p::before { content: "复制订阅链接，查看节点和导入教程。"; }
.view[data-view="store"] .page-hero p::before { content: "升级会员方案或购买额外流量。"; }
.view[data-view="account"] .page-hero p::before { content: "管理余额、订单、安全和支持。"; }

.page-hero p::before {
  display: block;
  margin-top: 8px;
  color: var(--go2-muted);
  font-size: 16px;
  line-height: 1.65;
}

.page-hero-action {
  margin-top: 18px !important;
}

.view[data-view="home"] {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr) !important;
  grid-template-areas:
    "hero hero"
    "membership actions"
    "membership notice"
    "orders notice"
    "foot foot" !important;
  gap: 20px !important;
}

.card,
.gradient-banner,
.profile-banner,
.profile-stat-card,
.menu-list-item,
.support-card,
.store-hero,
.store-hint,
.plan-compare-wrap,
.extra-traffic-panel,
.m-plan-card,
.tutorial-card,
.link-display-box {
  border: 1px solid var(--go2-line) !important;
  border-radius: 28px !important;
  background: var(--go2-card) !important;
  box-shadow: none !important;
}

.gradient-banner {
  min-height: 392px !important;
  padding: 30px !important;
  background:
    radial-gradient(260px 210px at 86% 82%, rgba(26, 115, 232, .10), transparent 68%),
    #fff !important;
}

.gradient-banner::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 146px;
  height: 146px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 48%, transparent 49%),
    conic-gradient(var(--go2-blue) 0 46%, #edf0f5 46% 100%);
  border: 1px solid var(--go2-soft-line);
  opacity: 1;
}

.gradient-banner::before {
  content: "流量";
  position: absolute;
  right: 82px;
  bottom: 91px;
  z-index: 1;
  width: auto;
  height: auto;
  background: none;
  color: var(--go2-muted);
  font-size: 13px;
  opacity: 1;
}

.banner-title {
  color: var(--go2-ink) !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  letter-spacing: -.045em !important;
}

.banner-title::before {
  content: "当前方案";
  display: block;
  margin-bottom: 12px;
  color: var(--go2-blue);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.banner-meta,
.banner-traffic-info,
.banner-traffic-tip,
.store-hero-text span,
.store-hint,
.m-plan-desc,
.plan-benefit-caption,
.profile-info p,
.profile-stat-card small,
.menu-text-box small {
  color: var(--go2-muted) !important;
}

.progress-bar-container {
  height: 10px !important;
  border-radius: 999px !important;
  background: #edf0f5 !important;
}

.progress-bar-fill {
  border-radius: inherit !important;
  background: var(--go2-blue) !important;
}

.banner-footer-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 26px !important;
}

.banner-stat-item {
  min-height: 74px !important;
  padding: 14px !important;
  border: 1px solid var(--go2-soft-line) !important;
  border-radius: 20px !important;
  background: #fbfcff !important;
}

.actions-grid {
  gap: 12px !important;
}

.action-btn {
  min-height: 82px !important;
  padding: 18px !important;
  border: 1px solid var(--go2-line) !important;
  border-radius: 28px !important;
  background: #fff !important;
  color: var(--go2-ink) !important;
  font-size: 0 !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.action-btn:nth-child(1)::after { content: "复制订阅"; }
.action-btn:nth-child(2)::after { content: "导入教程"; }
.action-btn:nth-child(3)::after { content: "升级方案"; }
.action-btn:nth-child(4)::after { content: "公告与支持"; }
.action-btn::after {
  font-size: 16px;
  font-weight: 500;
}

.action-btn svg {
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
  border-radius: 50% !important;
  background: var(--go2-blue-soft) !important;
  color: var(--go2-blue) !important;
}

.action-btn:nth-child(2) svg { background: var(--go2-green-soft) !important; color: var(--go2-green) !important; }
.action-btn:nth-child(3) svg { background: var(--go2-yellow-soft) !important; color: #8f6400 !important; }
.action-btn:nth-child(4) svg { background: var(--go2-red-soft) !important; color: var(--go2-red) !important; }

.card-title-row h3 {
  font-size: 0 !important;
}

.view[data-view="home"] > .card:nth-of-type(2) .card-title-row h3::before { content: "最新公告"; }
.view[data-view="home"] > .card:nth-of-type(3) .card-title-row h3::before { content: "最近订单"; }
#scroll-section-info .card-title-row h3::before { content: "订阅链接"; }
#scroll-section-tutorial .card-title-row h3::before { content: "导入客户端"; }
#scroll-section-nodes .card-title-row h3::before { content: "全部节点"; }

.card-title-row h3::before {
  color: var(--go2-ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.store-hero-text strong {
  font-size: 0 !important;
}

.store-hero-text strong::before {
  content: "选择你的方案";
  color: var(--go2-ink);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.m-plan-card {
  min-height: 380px !important;
  padding: 26px !important;
}

.m-plan-card.is-selected {
  border-color: var(--go2-blue) !important;
  box-shadow: inset 0 0 0 1px var(--go2-blue) !important;
}

.m-plan-name {
  color: var(--go2-ink) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
}

.m-plan-price b {
  color: var(--go2-ink) !important;
  font-size: 42px !important;
  font-weight: 500 !important;
}

.primary-action,
.secondary-action,
.support-action-btn,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn {
  height: 40px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.primary-action,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn,
.support-action-btn {
  background: var(--go2-blue) !important;
  border: 1px solid var(--go2-blue) !important;
  color: #fff !important;
}

.secondary-action {
  background: #fff !important;
  border: 1px solid var(--go2-line) !important;
  color: var(--go2-blue) !important;
}

@media (max-width: 720px) {
  .app-main {
    padding-top: 26px !important;
  }

  .page-hero {
    min-height: auto !important;
  }

  .page-hero h1::before {
    font-size: 34px;
  }

  .gradient-banner {
    min-height: auto !important;
  }

  .gradient-banner::after,
  .gradient-banner::before {
    display: none !important;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
}

body.mobile-app,
body.desktop-app {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background:
    radial-gradient(1000px circle at 12% -8%, rgba(96, 165, 250, 0.12), transparent 50%),
    radial-gradient(800px circle at 90% 0%, rgba(167, 139, 250, 0.1), transparent 45%),
    #000;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  color-scheme: dark;
}

a { color: #93c5fd; text-decoration: none; }
a:hover { color: #bfdbfe; }

/* ── Full desktop shell (no phone frame) ────────────────────────────────── */
.app-container {
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: transparent;
  max-width: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

/* ── Auth (desktop split) ───────────────────────────────────────────────── */
.auth-screen {
  flex: 1;
  display: flex;
  min-height: 100vh;
  overflow: auto;
  background: transparent;
  padding: 0;
}

.auth-hero {
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  width: 50%;
  border-right: 1px solid var(--color-border);
  background:
    radial-gradient(600px circle at 30% 20%, rgba(96, 165, 250, 0.2), transparent 55%),
    radial-gradient(500px circle at 70% 80%, rgba(167, 139, 250, 0.15), transparent 50%),
    linear-gradient(160deg, #050505 0%, #0c0c10 100%);
}

.auth-hero h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 16px;
}

.auth-hero p {
  color: var(--color-text-muted);
  font-size: 15px;
  max-width: 380px;
  line-height: 1.7;
}

.auth-hero ul {
  list-style: none;
  margin-top: 28px;
  display: grid;
  gap: 10px;
}

.auth-hero li {
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-hero li::before {
  content: "✦";
  color: #60a5fa;
  font-size: 11px;
}

.auth-panel {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 40px 32px;
}

@media (min-width: 900px) {
  .auth-hero { display: flex; }
  .auth-screen { display: flex; }
  .auth-panel {
    width: 50%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 8%;
  }
  .auth-panel .brand-lockup,
  .auth-panel .auth-form {
    max-width: 400px;
    width: 100%;
  }
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  background: linear-gradient(145deg, #fff, #d4d4d8);
  color: #000;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  overflow: hidden;
}

.brand-mark svg {
  display: block;
}

.brand-mark.brand-mark-logo {
  padding: 0;
  background: #0a0a0a;
  box-shadow: 0 0 20px rgba(237, 99, 42, 0.25);
}

.brand-mark.brand-mark-logo img,
.brand-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.brand-logo-img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(237, 99, 42, 0.2);
}

.brand-lockup div b {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}

.brand-lockup div small {
  font-size: 12px;
  color: var(--color-text-muted);
}

.auth-form h1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.auth-form > p {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-form label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.auth-form input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-dark);
  transition: 0.2s ease;
}

.auth-form input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.auth-form input::placeholder { color: #52525b; }

.inline-control { display: flex; gap: 8px; }
.inline-control input { flex: 1; }
.inline-control button { white-space: nowrap; padding: 0 14px; }

.primary-action {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: #fafafa;
  color: #0a0a0a;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.2s ease;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 28px rgba(255, 255, 255, 0.08);
}

.primary-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 12px 36px rgba(96, 165, 250, 0.2);
}

.primary-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.secondary-action {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-dark);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.2s ease;
}

.secondary-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.form-switch {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}

.form-switch a {
  color: #e4e4e7;
  font-weight: 600;
}

/* ── App shell: left nav + workspace ────────────────────────────────────── */
.app-shell {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar as permanent left rail */
.sidebar-overlay {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  width: var(--sidebar-w);
  height: 100%;
  z-index: 20;
  display: block;
  pointer-events: auto;
}

.sidebar-backdrop {
  display: none;
}

.sidebar-drawer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 8, 10, 0.96);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transform: none !important;
  box-shadow: none;
}

.sidebar-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
}

.sidebar-logo svg { color: #fafafa; }
.sidebar-logo .brand-logo-img { width: 28px; height: 28px; }
.sidebar-close-btn { display: none; }

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: 0.15s ease;
}

.sidebar-menu-item:hover,
.sidebar-menu-item.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f5;
}

.sidebar-menu-item.is-active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid var(--color-border);
}

.sidebar-user-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 13px;
}

.sidebar-user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-user-info strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info small {
  font-size: 11px;
  color: var(--color-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header spans content column only */
.app-header {
  grid-column: 2;
  grid-row: 1;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  z-index: 10;
}

.header-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-dark);
  display: none; /* desktop: hide hamburger / keep notice */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-btn[data-action="open-notice"] {
  display: inline-flex;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo svg { color: #fafafa; }
.header-logo .brand-logo-img { width: 28px; height: 28px; }
.header-logo span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* Main content */
.app-main {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  background: transparent;
}

.app-main::-webkit-scrollbar { width: 8px; }
.app-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.view {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.view.is-active { display: flex; }

/* Hide mobile bottom tab bar on desktop */
.m-tabbar {
  display: none !important;
  grid-column: 1;
  grid-row: 3;
}

/* Home two-column cards on wide screens */
@media (min-width: 961px) {
  .view[data-view="home"] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-areas:
      "banner banner"
      "actions actions"
      "notice orders"
      "foot foot";
    gap: 16px;
    align-items: start;
  }
  .view[data-view="home"] > .gradient-banner { grid-area: banner; }
  .view[data-view="home"] > .actions-grid { grid-area: actions; }
  .view[data-view="home"] > .card:nth-of-type(2) { grid-area: notice; }
  .view[data-view="home"] > .card:nth-of-type(3) { grid-area: orders; }
  .view[data-view="home"] > .screen-footer { grid-area: foot; }
}

/* ── Cards & common ─────────────────────────────────────────────────────── */
.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}

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

.card-title-row h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
}

.card-title-link {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.card-title-link:hover { color: #f5f5f5; }

/* Banner */
.gradient-banner {
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(600px circle at 85% 0%, rgba(96, 165, 250, 0.22), transparent 55%),
    radial-gradient(480px circle at 10% 100%, rgba(167, 139, 250, 0.16), transparent 50%),
    linear-gradient(160deg, #0c0c0e, #12141a);
  color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.banner-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.badge-green {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: 12px;
  font-weight: 700;
}

.badge-orange-light {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-size: 12px;
  font-weight: 600;
}

.banner-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(245, 245, 245, 0.85);
}

.banner-traffic-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

.progress-bar-container {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #60a5fa);
  transition: width 0.3s ease;
}

.banner-traffic-tip {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.55);
  margin-top: 8px;
}

.banner-footer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 4px;
}

.banner-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(245, 245, 245, 0.85);
}

/* Actions */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.action-btn {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  color: var(--color-text-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.action-btn span {
  font-size: 13px;
  font-weight: 600;
}

/* Lists */
.list-container { display: flex; flex-direction: column; }

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.list-item:last-child { border-bottom: none; }

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.badge-top {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}

.announcement-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-date {
  font-size: 12px;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.order-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.order-card-item:last-child { border-bottom: none; }

.order-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
  flex-shrink: 0;
}

.order-icon-box svg {
  display: block;
}

.order-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-detail-info b { font-size: 14px; }
.order-detail-info small { font-size: 12px; color: var(--color-text-light); }

.order-price-box {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.badge-success {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-light);
  padding: 2px 8px;
  border-radius: 999px;
}

.badge-pending {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-warning);
  background: var(--color-warning-light);
  padding: 2px 8px;
  border-radius: 999px;
}

.order-price-box strong { font-size: 14px; }

.screen-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--color-text-light);
}

/* Subscription */
.sub-tab-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}

.sub-tab-item {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.sub-tab-item.is-active {
  color: #fafafa;
  background: rgba(255, 255, 255, 0.06);
}

.link-display-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px 4px 12px;
}

.link-input {
  flex: 1;
  border: none;
  background: transparent;
  height: 40px;
  color: var(--color-text-dark);
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.link-eye-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.link-meta-text {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-light);
  margin: 10px 0 14px;
}

.link-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

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

.tutorial-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: 0.2s ease;
}

.tutorial-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.tutorial-card b { font-size: 14px; }
.tutorial-card span { font-size: 12px; color: var(--color-text-light); }

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.filter-btn {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.filter-btn.is-selected {
  background: #fafafa;
  color: #0a0a0a;
  border-color: #fafafa;
}

.node-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.node-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
}

.node-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  vertical-align: middle;
}

.node-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-info-text {
  display: flex;
  flex-direction: column;
}

.node-info-text strong { font-weight: 600; }
.node-info-text small { font-size: 11px; color: var(--color-text-light); }

.status-dot-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
}

.status-dot.offline { background: var(--color-danger); }

.latency-badge.good { color: var(--color-success); font-weight: 600; }
.latency-badge.warn { color: var(--color-warning); font-weight: 600; }
.latency-badge.bad { color: var(--color-danger); font-weight: 600; }

.load-cell { width: 72px; }
.load-text { font-size: 11px; font-weight: 600; text-align: right; margin-bottom: 4px; }
.load-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.load-bar-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: 2px;
}

/* Store */
.store-view .store-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(500px circle at 90% 0%, rgba(96, 165, 250, 0.15), transparent 50%),
    rgba(255, 255, 255, 0.03);
}

.store-hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.store-hero-text strong {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
}

.store-hero-text span {
  font-size: 13px;
  color: var(--color-text-muted);
}

.store-balance-chip {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: var(--color-text-muted);
}

.store-balance-chip b {
  color: #f5f5f5;
  margin-left: 4px;
}

.m-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  gap: 4px;
  width: fit-content;
}

.m-seg-item {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
}

.m-seg-item.is-active {
  background: #fafafa;
  color: #0a0a0a;
}

.m-level-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-chip {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.m-chip.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.2);
}

.store-hint {
  font-size: 13px;
  color: var(--color-text-light);
}

.m-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.m-plan-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: 0.2s ease;
  min-height: 200px;
}

/* Per-plan aligned benefit table */
.plan-benefit-wrap {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.plan-benefit-caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.plan-benefit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.plan-benefit-table th,
.plan-benefit-table td {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.plan-benefit-table tr:last-child th,
.plan-benefit-table tr:last-child td {
  border-bottom: none;
}

.plan-benefit-table th {
  width: 38%;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
}

.plan-benefit-table td {
  text-align: right;
  font-weight: 600;
  color: #f0f0f0;
}

/* Full comparison matrix */
.plan-compare-wrap {
  margin-top: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.025);
}

.plan-compare-head {
  margin-bottom: 14px;
}

.plan-compare-head h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.plan-compare-head p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.plan-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.plan-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}

.plan-compare-table th,
.plan-compare-table td {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  white-space: nowrap;
}

.plan-compare-table thead th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
}

.plan-compare-table thead th strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  margin-bottom: 2px;
}

.plan-compare-table thead th em {
  font-style: normal;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.plan-compare-table .plan-compare-corner,
.plan-compare-table tbody th {
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  left: 0;
  z-index: 1;
}

.plan-compare-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

.m-plan-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.m-plan-card.is-selected {
  border-color: rgba(147, 197, 253, 0.55);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.2);
  background: rgba(96, 165, 250, 0.08);
}

.m-plan-card.is-dim { opacity: 0.55; }

.m-plan-card h4,
.m-plan-card .m-plan-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
}

.m-plan-card .price,
.m-plan-card .m-plan-price {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.m-buy-bar {
  position: sticky;
  bottom: 0;
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(12, 12, 14, 0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 30;
}

.m-buy-btn {
  border: none;
  border-radius: 999px;
  background: #fafafa;
  color: #0a0a0a;
  font-weight: 700;
  padding: 12px 22px;
  cursor: pointer;
}

.m-buy-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Extra traffic entry + modal ────────────────────────────────────────── */
.extra-traffic-panel {
  margin-top: 8px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(500px circle at 90% 0%, rgba(52, 211, 153, 0.08), transparent 50%),
    rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.extra-traffic-entry {
  cursor: pointer;
  transition: 0.15s ease;
}

.extra-traffic-entry:hover {
  border-color: rgba(52, 211, 153, 0.35);
  background:
    radial-gradient(500px circle at 90% 0%, rgba(52, 211, 153, 0.12), transparent 50%),
    rgba(255, 255, 255, 0.05);
}

.extra-traffic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.extra-traffic-head h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.extra-traffic-head p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.extra-modal-card {
  max-width: 440px;
  width: min(440px, calc(100vw - 32px));
}

.extra-modal-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 8px 0 18px;
}

.extra-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.extra-modal-field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.extra-modal-input {
  width: 100%;
  box-sizing: border-box;
}

.extra-modal-input input {
  width: 100%;
  flex: 1;
}

.extra-modal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.extra-modal-preset {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f5;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.extra-modal-preset:hover {
  border-color: rgba(147, 197, 253, 0.45);
  background: rgba(96, 165, 250, 0.1);
}

.extra-modal-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 8px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.extra-modal-price-row strong {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: #fafafa;
}

.extra-pay-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 18px;
}

.extra-pay-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.extra-pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: 0.15s ease;
}

.extra-pay-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.extra-pay-option.is-selected {
  border-color: rgba(147, 197, 253, 0.5);
  background: rgba(96, 165, 250, 0.1);
}

.extra-pay-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  position: relative;
}

.extra-pay-option.is-selected .extra-pay-radio {
  border-color: #93c5fd;
}

.extra-pay-option.is-selected .extra-pay-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #60a5fa;
}

.extra-pay-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.extra-pay-text b {
  font-size: 14px;
  font-weight: 700;
}

.extra-pay-text small {
  font-size: 12px;
  color: var(--color-text-muted);
}

.extra-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.extra-preset-chip {
  position: relative;
  min-width: 100px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: 0.15s ease;
}

.extra-preset-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.extra-preset-chip.is-selected {
  border-color: rgba(147, 197, 253, 0.55);
  background: rgba(96, 165, 250, 0.1);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.15);
}

.extra-preset-chip strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
}

.extra-preset-chip span {
  font-size: 13px;
  color: var(--color-text-muted);
}

.extra-preset-chip em {
  position: absolute;
  top: 6px;
  right: 8px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-warning);
}

.extra-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

.extra-custom-row > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.extra-custom-input {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0 12px;
  height: 44px;
}

.extra-custom-input input {
  width: 96px;
  border: none;
  background: transparent;
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  height: 100%;
}

.extra-custom-input .extra-unit {
  font-size: 13px;
  color: var(--color-text-light);
}

.extra-custom-price {
  font-size: 14px;
  font-weight: 700;
  color: #93c5fd;
  min-width: 72px;
}

.extra-buy-btn {
  margin-left: auto;
}

@media (max-width: 640px) {
  .extra-custom-row {
    flex-direction: column;
    align-items: stretch;
  }
  .extra-buy-btn {
    margin-left: 0;
    width: 100%;
  }
  .extra-custom-input {
    width: 100%;
  }
  .extra-custom-input input {
    flex: 1;
    width: auto;
  }
}

/* Account */
.profile-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(500px circle at 90% 0%, rgba(167, 139, 250, 0.16), transparent 50%),
    rgba(255, 255, 255, 0.03);
}

.avatar-large {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  font-size: 28px;
  font-weight: 800;
  flex-shrink: 0;
}

.profile-info h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.profile-info p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.profile-stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-stat-card small {
  font-size: 12px;
  color: var(--color-text-light);
}

.profile-stat-card strong {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}

.profile-stat-card span {
  font-size: 12px;
  color: #93c5fd;
  cursor: pointer;
}

.menu-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.menu-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: 0.2s ease;
}

.menu-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.menu-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
  flex-shrink: 0;
}

.menu-icon-box svg {
  display: block;
}

.menu-text-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-text-box strong { font-size: 14px; }
.menu-text-box small { font-size: 12px; color: var(--color-text-light); }

.support-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
}

.support-info-left {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.support-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
}

.support-icon svg {
  display: block;
}

.screen-footer svg {
  display: block;
  flex-shrink: 0;
  color: var(--color-text-light);
}

.m-plan-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-warning);
}

.m-plan-lock svg {
  flex-shrink: 0;
}

.m-plan-radio {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #0a0a0a;
  background: transparent;
}

.m-plan-card.is-selected .m-plan-radio {
  background: #fafafa;
  border-color: #fafafa;
  color: #0a0a0a;
}

.support-text-details h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

.support-text-details p {
  font-size: 12px;
  color: var(--color-text-muted);
}

.support-action-btn {
  border: none;
  border-radius: 999px;
  background: #fafafa;
  color: #0a0a0a;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Stats grid (if used) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card small { font-size: 12px; color: var(--color-text-light); }
.stat-card strong { font-family: var(--font-heading); font-size: 22px; }
.stat-card span { font-size: 12px; color: var(--color-text-muted); }
.text-green { color: var(--color-success); }
.text-orange { color: var(--color-warning); }

/* Modals */
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-layer.is-open { display: flex; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  background: #111113;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
}

.modal-card h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  margin-bottom: 10px;
  padding-right: 28px;
}

.modal-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  line-height: 1.65;
}

.checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.checkout-summary strong {
  font-family: var(--font-heading);
  font-size: 22px;
}

/* Toast */
.toast-region {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-region .toast,
.toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #18181b;
  border: 1px solid var(--color-border);
  color: #f5f5f5;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-8px);
  transition: 0.25s ease;
}

.toast.show,
.toast-region .toast.show {
  opacity: 1;
  transform: none;
}

/* Legacy store bits */
.store-period-selector,
.period-btn,
.plan-option-card,
.plan-buy-btn,
.store-promo-banner,
.plan-scroll-track,
.plan-scroll-card,
.addon-nine-grid,
.addon-grid-cell,
.addon-buy-bar {
  /* keep usable if any remnant markup */
}

.nav-tab-container { display: none; }

/* ── Responsive: tablet / mobile fallback ───────────────────────────────── */
@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr auto;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 80;
    display: none;
    pointer-events: none;
  }

  .sidebar-overlay.is-open {
    display: block;
    pointer-events: auto;
  }

  .sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }

  .sidebar-drawer {
    width: min(86vw, 300px);
    transform: translateX(-105%) !important;
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }

  .sidebar-overlay.is-open .sidebar-drawer {
    transform: translateX(0) !important;
  }

  .sidebar-close-btn {
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 24px;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }

  .app-header {
    grid-column: 1;
    padding: 0 12px;
  }

  .header-btn[data-action="open-sidebar"] {
    display: inline-flex;
  }

  .app-main {
    grid-column: 1;
    padding: 16px 14px 24px;
  }

  .m-tabbar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-column: 1;
    border-top: 1px solid var(--color-border);
    background: rgba(8, 8, 10, 0.95);
    backdrop-filter: blur(12px);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }

  .m-tab {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 11px;
    cursor: pointer;
  }

  .m-tab.is-active,
  .m-tab-primary.is-active {
    color: #fafafa;
  }

  .actions-grid { grid-template-columns: repeat(2, 1fr); }
  .m-plan-list { grid-template-columns: 1fr; }
  .profile-stats-row { grid-template-columns: 1fr; }
  .menu-list-grid { grid-template-columns: 1fr; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .support-card { flex-direction: column; align-items: stretch; }
  .auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .auth-screen::before { display: none; }
  .auth-panel { grid-column: auto; margin: 0; padding: 0; }
}

@media (min-width: 961px) and (max-width: 1200px) {
  .m-plan-list { grid-template-columns: repeat(2, 1fr); }
  .actions-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Google / Material refresh — visual-only layer
   Keeps all existing DOM hooks intact: ids, classes, data-action and routes.
   ========================================================================== */

:root {
  --font-heading: 'Inter', 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-primary: #1a73e8;
  --color-primary-light: #e8f0fe;
  --color-success: #188038;
  --color-success-light: #e6f4ea;
  --color-warning: #f9ab00;
  --color-warning-light: #fef7e0;
  --color-danger: #d93025;
  --color-danger-light: #fce8e6;
  --color-text-dark: #202124;
  --color-text-muted: #5f6368;
  --color-text-light: #80868b;
  --color-bg-light: #f8fafd;
  --color-bg-card: #ffffff;
  --color-border: #dadce0;
  --gradient-blue: linear-gradient(135deg, #1a73e8 0%, #4285f4 58%, #8ab4f8 120%);
  --gradient-green: linear-gradient(135deg, #188038, #34a853);
  --gradient-purple: linear-gradient(135deg, #673ab7, #a142f4);
  --gradient-orange: linear-gradient(135deg, #f29900, #fbbc04);
  --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.08);
  --shadow-md: 0 2px 6px rgba(60, 64, 67, 0.12), 0 8px 24px rgba(60, 64, 67, 0.08);
  --shadow-lg: 0 8px 20px rgba(60, 64, 67, 0.16), 0 20px 44px rgba(60, 64, 67, 0.12);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --sidebar-w: 280px;
  --header-h: 72px;
  --content-max: 1180px;
}

body.mobile-app,
body.desktop-app {
  color: var(--color-text-dark);
  background:
    radial-gradient(900px circle at 8% -12%, rgba(66, 133, 244, 0.14), transparent 42%),
    radial-gradient(720px circle at 92% 6%, rgba(52, 168, 83, 0.12), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fafd 34%, #f1f5fb 100%);
}

button, input, select, textarea { color-scheme: light; }
a { color: #1a73e8; }
a:hover { color: #1558b0; }

.app-container,
.app-shell,
.app-main {
  background: transparent;
}

.auth-screen {
  background: linear-gradient(90deg, #f8fafd 0%, #ffffff 52%, #f8fafd 100%);
}

.auth-hero {
  border-right: 1px solid #e8eaed;
  background:
    radial-gradient(520px circle at 26% 18%, rgba(66, 133, 244, 0.22), transparent 52%),
    radial-gradient(480px circle at 74% 78%, rgba(52, 168, 83, 0.14), transparent 52%),
    linear-gradient(160deg, #ffffff 0%, #f8fafd 100%);
}

.auth-hero h2,
.auth-form h1,
.card-title-row h3,
.m-plan-card h4,
.m-plan-card .m-plan-name,
.store-hero-text strong,
.profile-stat-card strong,
.stat-card strong {
  color: #202124;
  letter-spacing: -0.035em;
}

.auth-hero p,
.auth-hero li,
.brand-lockup div small,
.auth-form > p,
.auth-form label span,
.form-switch,
.card-title-link,
.load-text,
.node-info-text small,
.profile-stat-card small,
.stat-card small,
.store-hint,
.store-hero-text span,
.tutorial-card span,
.extra-modal-desc,
.modal-card p {
  color: #5f6368;
}

.auth-hero li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #34a853;
  box-shadow: 0 0 0 4px #e6f4ea;
}

.auth-panel,
.sidebar-drawer,
.app-header {
  color: #202124;
}

.auth-form {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.brand-mark,
.brand-mark.brand-mark-logo,
.brand-logo-img {
  background: #fff;
  border: 1px solid #e8eaed;
  box-shadow: var(--shadow-sm);
}

.auth-form input,
.auth-form textarea,
.auth-form select,
.fi,
.extra-modal-input,
.tb-inp,
.tb-sel {
  background: #fff;
  color: #202124;
  border: 1px solid #dadce0;
  border-radius: 14px;
  box-shadow: none;
}

.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus,
.fi:focus,
.extra-modal-input:focus-within,
.tb-inp:focus,
.tb-sel:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
  outline: none;
}

.primary-action,
.secondary-action,
.copy-btn,
.action-btn,
.store-primary-btn,
.m-plan-cta,
.extra-modal-preset,
.modal-card button,
.btn {
  border-radius: 999px;
}

.primary-action,
.store-primary-btn,
.m-plan-cta,
.btn-primary {
  background: #1a73e8;
  color: #fff;
  border: 1px solid #1a73e8;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.22);
}

.primary-action:hover,
.store-primary-btn:hover,
.m-plan-cta:hover,
.btn-primary:hover {
  background: #1558b0;
  border-color: #1558b0;
}

.secondary-action,
.copy-btn,
.btn-ghost {
  background: #fff;
  color: #1a73e8;
  border: 1px solid #dadce0;
}

.secondary-action:hover,
.copy-btn:hover,
.btn-ghost:hover {
  background: #f8fafd;
  border-color: #c7d7fe;
}

.sidebar-overlay {
  background: transparent;
  border-right: 1px solid #e8eaed;
}

.sidebar-drawer {
  background: rgba(255, 255, 255, 0.92);
  border-right: 1px solid #e8eaed;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.sidebar-header,
.sidebar-footer,
.app-header {
  border-color: #e8eaed;
}

.sidebar-logo,
.header-logo {
  color: #202124;
  font-weight: 700;
}

.sidebar-menu-item {
  color: #5f6368;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  min-height: 48px;
}

.sidebar-menu-item svg { color: #5f6368; }
.sidebar-menu-item:hover {
  color: #202124;
  background: #f1f3f4;
}

.sidebar-menu-item.is-active {
  color: #174ea6;
  background: #e8f0fe;
  border-color: transparent;
  box-shadow: none;
}

.sidebar-menu-item.is-active svg { color: #1a73e8; }

.sidebar-user-block {
  background: #f8fafd;
  border: 1px solid #e8eaed;
  border-radius: 20px;
}

.avatar-small,
.account-avatar,
.avatar-circle {
  background: #e8f0fe;
  color: #1a73e8;
}

.app-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.header-btn {
  background: transparent;
  color: #5f6368;
  border: 1px solid transparent;
  border-radius: 999px;
}

.header-btn:hover {
  background: #f1f3f4;
  color: #202124;
}

.view { gap: 20px; }

.card,
.gradient-banner,
.tutorial-card,
.node-table,
.store-view .store-hero,
.m-plan-card,
.profile-stat-card,
.support-card,
.stat-card,
.modal-card,
.extra-modal-card {
  background: #fff;
  color: #202124;
  border: 1px solid #e8eaed;
  box-shadow: var(--shadow-sm);
}

.card:hover,
.tutorial-card:hover,
.m-plan-card:hover,
.support-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.gradient-banner {
  background:
    radial-gradient(460px circle at 86% 10%, rgba(251, 188, 4, 0.26), transparent 42%),
    linear-gradient(135deg, #1a73e8 0%, #4285f4 58%, #8ab4f8 125%);
  color: #fff;
  border: 0;
  box-shadow: 0 12px 28px rgba(26, 115, 232, 0.22);
}

.gradient-banner * { color: inherit; }
.banner-title { color: #fff; }

.badge-green,
.badge-orange-light,
.badge,
.tag,
.m-plan-tag {
  border-radius: 999px;
  font-weight: 700;
}

.badge-green {
  background: #e6f4ea;
  color: #137333;
}

.gradient-banner .badge-green {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.badge-green.offline {
  background: #fce8e6;
  color: #d93025;
}

.badge-orange-light {
  background: #fef7e0;
  color: #b06000;
}

.progress-bar-container {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill,
.load-fill {
  background: linear-gradient(90deg, #34a853, #fbbc04);
  border-radius: 999px;
}

.actions-grid { gap: 14px; }

.action-btn {
  background: #fff;
  color: #202124;
  border: 1px solid #e8eaed;
  box-shadow: var(--shadow-sm);
}

.action-btn svg { color: #1a73e8; }
.action-btn:hover {
  background: #f8fafd;
  border-color: #c7d7fe;
  box-shadow: var(--shadow-md);
}

.list-item,
.order-card-item,
.node-table td,
.node-table th,
.m-plan-benefit-row,
.extra-modal-price-row {
  border-color: #e8eaed;
}

.node-table {
  overflow: hidden;
  border-radius: 24px;
}

.node-table th {
  background: #f8fafd;
  color: #5f6368;
}

.node-table tr:hover td { background: #f8fafd; }

.store-view .store-hero {
  background:
    radial-gradient(480px circle at 92% 0%, rgba(66, 133, 244, 0.16), transparent 42%),
    #fff;
}

.store-balance-chip {
  background: #e8f0fe;
  color: #174ea6;
  border: 1px solid #d2e3fc;
  border-radius: 999px;
}

.m-plan-card { border-radius: 28px; }

.m-plan-card.is-selected {
  border-color: #1a73e8;
  background: #f8fbff;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.14), var(--shadow-md);
}

.m-plan-card.is-dim { opacity: 0.62; }

.m-plan-card .price,
.m-plan-card .m-plan-price {
  color: #1a73e8;
}

.m-plan-radio { border-color: #dadce0; }

.m-plan-card.is-selected .m-plan-radio {
  border-color: #1a73e8;
  background: #1a73e8;
}

.extra-modal-preset {
  background: #fff;
  border: 1px solid #dadce0;
}

.extra-modal-preset:hover,
.extra-modal-preset.is-selected {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #174ea6;
}

.account-header,
.profile-header {
  background:
    radial-gradient(360px circle at 82% 0%, rgba(66, 133, 244, 0.18), transparent 44%),
    #fff;
  color: #202124;
  border: 1px solid #e8eaed;
  box-shadow: var(--shadow-sm);
}

.support-card svg,
.card-title-row svg,
.tutorial-card svg {
  color: #1a73e8;
}

.modal-layer {
  background: rgba(32, 33, 36, 0.34);
  backdrop-filter: blur(6px);
}

.modal-card { border-radius: 28px; }

.modal-close {
  background: #f1f3f4;
  color: #5f6368;
}

.modal-close:hover {
  background: #e8eaed;
  color: #202124;
}

.toast-region .toast,
.toast {
  background: #202124;
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 899px) {
  .sidebar-overlay {
    background: rgba(32, 33, 36, 0.34);
    border-right: 0;
  }

  .sidebar-drawer { box-shadow: var(--shadow-lg); }

  .bottom-tabbar {
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid #e8eaed;
    backdrop-filter: blur(18px);
  }

  .bottom-tabbar button,
  .bottom-tabbar .tabbar-item {
    color: #5f6368;
  }

  .bottom-tabbar .is-active,
  .bottom-tabbar button.is-active,
  .bottom-tabbar .tabbar-item.is-active {
    color: #1a73e8;
  }
}

/* ==========================================================================
   Google Console redesign — layout-first refresh
   References: Material 3 permanent navigation drawer, top app bar, cards and
   resource-table patterns. Business hooks remain untouched.
   ========================================================================== */

:root {
  --console-bg: #f8fafd;
  --console-surface: #ffffff;
  --console-surface-soft: #f1f4f9;
  --console-line: #dfe3eb;
  --console-blue: #1a73e8;
  --console-blue-700: #174ea6;
  --console-green: #188038;
  --console-yellow: #fbbc04;
  --console-red: #d93025;
  --console-ink: #202124;
  --console-muted: #5f6368;
  --console-subtle: #80868b;
  --console-shadow-1: 0 1px 2px rgba(60, 64, 67, 0.14), 0 1px 3px rgba(60, 64, 67, 0.08);
  --console-shadow-2: 0 8px 24px rgba(60, 64, 67, 0.12);
  --sidebar-w: 288px;
  --header-h: 64px;
  --content-max: 1360px;
}

body.desktop-app,
body.mobile-app {
  background:
    linear-gradient(180deg, #fff 0, #fff 76px, var(--console-bg) 76px),
    var(--console-bg);
  color: var(--console-ink);
}

.app-shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
}

.sidebar-overlay {
  background: #fff;
  border-right: 1px solid var(--console-line);
}

.sidebar-drawer {
  background: #fff;
  border-right: 0;
  padding: 8px;
}

.sidebar-header {
  height: 56px;
  padding: 0 10px 0 12px;
  border-bottom: 0;
}

.sidebar-logo {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.sidebar-logo .brand-logo-img,
.header-logo .brand-logo-img {
  border-radius: 10px;
}

.sidebar-menu {
  gap: 2px;
  padding: 8px 0 12px;
}

.sidebar-menu::before {
  content: "控制台";
  display: block;
  padding: 8px 16px 10px;
  color: var(--console-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-menu-item {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 500;
  gap: 14px;
}

.sidebar-menu-item.is-active {
  background: #e8f0fe;
  color: var(--console-blue-700);
  font-weight: 700;
}

.sidebar-menu-item[data-action="sign-out"] {
  margin-top: 12px !important;
}

.sidebar-footer {
  padding: 10px 0 0;
  border-top: 1px solid #edf0f5;
}

.sidebar-user-block {
  padding: 10px;
  border-radius: 18px;
  background: #f8fafd;
  border: 1px solid #edf0f5;
}

.app-header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--console-line);
  box-shadow: none;
  gap: 18px;
}

.header-logo {
  min-width: 180px;
}

.header-logo span {
  font-size: 17px;
  font-weight: 650;
}

.header-search {
  flex: 1;
  max-width: 720px;
  height: 46px;
  border-radius: 999px;
  background: #f1f3f4;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  color: var(--console-muted);
  font-size: 14px;
}

.header-search:hover {
  background: #fff;
  border-color: #d2e3fc;
  box-shadow: var(--console-shadow-1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-status-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e6f4ea;
  color: #137333;
  font-size: 12px;
  font-weight: 700;
}

.app-main {
  padding: 28px 36px 56px;
  background:
    radial-gradient(520px circle at 92% -80px, rgba(66, 133, 244, 0.12), transparent 52%),
    var(--console-bg);
}

.view {
  width: min(100%, var(--content-max));
  gap: 18px;
}

.page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  padding: 0 2px 8px;
}

.page-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--console-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0;
  color: var(--console-ink);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 750;
}

.page-hero p {
  margin-top: 8px;
  color: var(--console-muted);
  font-size: 14px;
}

.page-hero-action {
  width: auto;
  min-width: 128px;
  padding: 0 22px;
}

.card,
.tutorial-card,
.node-table,
.store-view .store-hero,
.m-plan-card,
.profile-banner,
.profile-stat-card,
.menu-list-item,
.support-card,
.plan-compare-wrap,
.extra-traffic-panel {
  background: var(--console-surface);
  border: 1px solid var(--console-line);
  border-radius: 24px;
  box-shadow: none;
}

.card:hover,
.tutorial-card:hover,
.m-plan-card:hover,
.menu-list-item:hover,
.support-card:hover {
  transform: none;
  box-shadow: var(--console-shadow-1);
}

.card {
  padding: 22px;
}

.card-title-row {
  margin-bottom: 18px;
}

.card-title-row h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card-title-link {
  color: var(--console-blue);
  font-weight: 700;
}

/* Home: Google Console overview layout */
@media (min-width: 961px) {
  .view[data-view="home"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "hero hero"
      "banner actions"
      "banner notice"
      "orders notice"
      "foot foot";
    gap: 18px;
    align-items: stretch;
  }

  .view[data-view="home"] > .page-hero { grid-area: hero; }
  .view[data-view="home"] > .gradient-banner { grid-area: banner; }
  .view[data-view="home"] > .actions-grid { grid-area: actions; }
  .view[data-view="home"] > .card:nth-of-type(2) { grid-area: notice; }
  .view[data-view="home"] > .card:nth-of-type(3) { grid-area: orders; }
  .view[data-view="home"] > .screen-footer { grid-area: foot; }
}

.gradient-banner {
  min-height: 352px;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(420px circle at 96% 8%, rgba(255, 255, 255, 0.32), transparent 44%),
    radial-gradient(320px circle at 12% 100%, rgba(251, 188, 4, 0.28), transparent 48%),
    linear-gradient(135deg, #1967d2 0%, #1a73e8 48%, #4285f4 100%);
  box-shadow: 0 14px 34px rgba(26, 115, 232, 0.22);
}

.gradient-banner::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 24px;
  width: 132px;
  height: 132px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
  transform: rotate(-8deg);
}

.banner-header,
.banner-meta,
.banner-traffic-info,
.banner-footer-stats {
  position: relative;
  z-index: 1;
}

.banner-title {
  font-size: clamp(30px, 3vw, 44px);
  letter-spacing: -0.05em;
}

.banner-meta {
  margin-top: 2px;
  font-size: 14px;
}

.banner-traffic-info {
  margin-top: 30px;
  font-size: 14px;
}

.progress-bar-container {
  height: 12px;
}

.banner-footer-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
}

.banner-stat-item {
  min-height: 64px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

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

.action-btn {
  min-height: 116px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
}

.action-btn svg {
  width: 26px;
  height: 26px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 14px;
  background: #e8f0fe;
}

.action-btn span {
  font-size: 14px;
}

.list-item,
.order-card-item {
  border-bottom-color: #edf0f5;
}

.order-icon-box,
.menu-icon-box,
.support-icon {
  background: #e8f0fe;
  color: var(--console-blue);
}

/* Subscription: resource console layout */
.view[data-view="subscription"] {
  gap: 16px;
}

.sub-tab-bar {
  top: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  align-self: flex-start;
  border: 1px solid var(--console-line);
  border-radius: 999px;
  background: #fff !important;
  box-shadow: var(--console-shadow-1);
}

.sub-tab-item {
  min-width: 104px;
  border-radius: 999px;
}

.sub-tab-item.is-active {
  background: #e8f0fe;
  color: var(--console-blue-700);
}

.sub-scroll-content-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "nodes info"
    "nodes tutorial";
  gap: 18px !important;
  align-items: start;
}

#scroll-section-info { grid-area: info; position: sticky; top: 82px; }
#scroll-section-tutorial { grid-area: tutorial; position: sticky; top: 330px; }
#scroll-section-nodes { grid-area: nodes; min-height: 620px; }

.link-display-box {
  min-height: 54px;
  border-radius: 18px;
  background: #f8fafd;
}

.link-buttons-row {
  grid-template-columns: 1fr;
}

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

.tutorial-card {
  min-height: 74px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.tutorial-card span {
  margin-left: auto;
}

.filter-row {
  padding: 6px;
  border: 1px solid #edf0f5;
  border-radius: 999px;
  background: #f8fafd;
}

.filter-btn {
  border-radius: 999px;
}

.filter-btn.is-selected {
  background: #e8f0fe;
  color: var(--console-blue-700);
}

.node-table {
  border-collapse: separate;
  border-spacing: 0;
}

.node-table th {
  height: 44px;
  background: #f8fafd;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.node-table td {
  height: 58px;
}

/* Store: marketplace layout */
.store-view {
  gap: 18px;
}

.store-view .store-hero {
  padding: 22px;
  border-radius: 28px;
}

.m-level-scroll {
  padding: 6px;
  border: 1px solid var(--console-line);
  border-radius: 999px;
  background: #fff;
  align-self: flex-start;
}

.m-chip {
  border-radius: 999px;
}

.m-chip.is-active {
  background: #e8f0fe;
  color: var(--console-blue-700);
}

.m-plan-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.m-plan-card {
  min-height: 360px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.m-plan-card.is-selected {
  border-color: #8ab4f8;
  background: linear-gradient(180deg, #f8fbff 0, #fff 42%);
}

.plan-compare-wrap,
.extra-traffic-panel {
  padding: 22px;
}

/* Account: settings console layout */
@media (min-width: 961px) {
  .view[data-view="account"] {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "profile stats"
      "profile menu"
      "support menu"
      "foot foot";
    gap: 18px;
    align-items: start;
  }

  .view[data-view="account"] > .page-hero { grid-area: hero; }
  .view[data-view="account"] > .profile-banner { grid-area: profile; position: sticky; top: 86px; }
  .view[data-view="account"] > .profile-stats-row { grid-area: stats; }
  .view[data-view="account"] > .menu-list-grid { grid-area: menu; }
  .view[data-view="account"] > .support-card { grid-area: support; }
  .view[data-view="account"] > .screen-footer { grid-area: foot; }
}

.profile-banner {
  min-height: 260px;
  align-items: flex-start;
  flex-direction: column;
  background:
    radial-gradient(280px circle at 86% 12%, rgba(66, 133, 244, 0.16), transparent 44%),
    #fff;
}

.avatar-large {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: #e8f0fe;
  color: var(--console-blue);
}

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

.profile-stat-card {
  min-height: 138px;
  padding: 20px;
}

.profile-stat-card strong {
  font-size: 26px;
}

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

.menu-list-item {
  min-height: 132px;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px;
}

.support-card {
  align-items: flex-start;
  flex-direction: column;
}

.support-action-btn {
  width: 100%;
  justify-content: center;
  background: var(--console-blue);
  color: #fff;
}

/* Desktop density and visual polish */
.primary-action,
.secondary-action,
.support-action-btn {
  height: 42px;
  min-height: 42px;
}

.primary-action {
  background: var(--console-blue);
  border-color: var(--console-blue);
}

.secondary-action {
  background: #fff;
  border-color: var(--console-line);
}

.screen-footer {
  color: var(--console-subtle);
}

@media (max-width: 1200px) {
  .sub-scroll-content-group {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "info"
      "tutorial"
      "nodes";
  }

  #scroll-section-info,
  #scroll-section-tutorial {
    position: static;
  }

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

  .m-plan-list,
  .menu-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 60px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
  }

  .app-header {
    grid-column: 1;
    padding: 8px 12px;
  }

  .header-logo {
    min-width: 0;
  }

  .header-search,
  .header-status-pill {
    display: none;
  }

  .app-main {
    grid-column: 1;
    padding: 18px 14px 92px;
  }

  .page-hero {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .page-hero-action {
    width: 100%;
  }

  .gradient-banner {
    min-height: 300px;
    padding: 22px;
  }

  .banner-footer-stats {
    grid-template-columns: 1fr;
  }

  .actions-grid,
  .tutorial-grid,
  .m-plan-list,
  .profile-stats-row,
  .menu-list-grid {
    grid-template-columns: 1fr;
  }

  .sub-tab-bar {
    width: 100%;
    overflow-x: auto;
  }

  .sub-tab-item {
    min-width: max-content;
    flex: 1;
  }

  .filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .filter-btn {
    white-space: nowrap;
  }

  .sidebar-drawer {
    padding: 8px;
  }

  .m-tabbar {
    background: rgba(255, 255, 255, 0.96);
  }
}

/* ==========================================================================
   Google product redesign — final visual language pass
   Target: Google One / Google Account style, not an admin console.
   Principles used: centered content, top product bar, horizontal primary nav,
   outlined Material cards, generous whitespace, restrained Google colors.
   ========================================================================== */

:root {
  --g-blue: #1a73e8;
  --g-red: #ea4335;
  --g-yellow: #fbbc04;
  --g-green: #34a853;
  --g-ink: #202124;
  --g-muted: #5f6368;
  --g-subtle: #80868b;
  --g-bg: #f8fafd;
  --g-surface: #ffffff;
  --g-line: #dadce0;
  --g-line-soft: #e8eaed;
  --g-blue-soft: #e8f0fe;
  --g-green-soft: #e6f4ea;
  --g-yellow-soft: #fef7e0;
  --g-red-soft: #fce8e6;
  --g-radius: 18px;
  --g-radius-lg: 28px;
  --sidebar-w: 100%;
  --header-h: 64px;
  --content-max: 1184px;
  --font-heading: "Inter", "Google Sans", "Product Sans", Arial, system-ui, sans-serif;
  --font-body: "Inter", "Google Sans", "Product Sans", Arial, system-ui, sans-serif;
}

body.desktop-app,
body.mobile-app {
  color: var(--g-ink);
  background: var(--g-bg);
  font-family: var(--font-body);
}

body.desktop-app::before,
body.mobile-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px circle at 18% -8%, rgba(26, 115, 232, 0.10), transparent 44%),
    radial-gradient(620px circle at 88% 8%, rgba(52, 168, 83, 0.08), transparent 40%),
    linear-gradient(180deg, #fff 0 132px, #f8fafd 132px 100%);
}

.app-container {
  height: 100vh;
  background: transparent;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 64px 58px minmax(0, 1fr);
  height: 100%;
}

/* Google-like top product bar */
.app-header {
  grid-column: 1;
  grid-row: 1;
  height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--g-line-soft);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: auto minmax(280px, 720px) auto;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.header-logo {
  min-width: 248px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo .brand-logo-img {
  display: none;
}

.google-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.08em;
  font-family: Arial, "Product Sans", sans-serif;
  font-weight: 700;
}

.g-blue { color: #4285f4; }
.g-red { color: #ea4335; }
.g-yellow { color: #fbbc04; }
.g-green { color: #34a853; }

#header-title-text {
  color: var(--g-muted);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.header-search {
  max-width: none;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: #f1f3f4;
  color: var(--g-muted);
  padding: 0 18px;
  box-shadow: none;
}

.header-search:hover,
.header-search:focus-within {
  background: #fff;
  border-color: var(--g-line-soft);
  box-shadow: 0 1px 6px rgba(60, 64, 67, 0.18);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-status-pill {
  height: 32px;
  border-radius: 16px;
  background: var(--g-blue-soft);
  color: #174ea6;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
}

.header-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--g-muted);
  border-radius: 50%;
  background: transparent;
}

.header-btn[data-action="open-sidebar"] {
  display: none;
}

.header-btn:hover {
  background: #f1f3f4;
  color: var(--g-ink);
}

/* Convert the old sidebar into Google-style horizontal product navigation */
.sidebar-overlay {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 58px;
  z-index: 12;
  display: block;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.96);
  border-right: 0;
  border-bottom: 1px solid var(--g-line-soft);
}

.sidebar-backdrop,
.sidebar-header,
.sidebar-footer {
  display: none !important;
}

.sidebar-drawer {
  position: static;
  width: min(100%, var(--content-max));
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none !important;
  backdrop-filter: none;
}

.sidebar-menu {
  height: 100%;
  padding: 0;
  overflow: visible;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.sidebar-menu::before {
  display: none;
}

.sidebar-menu-item {
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  color: var(--g-muted);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  position: relative;
}

.sidebar-menu-item svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.sidebar-menu-item:hover {
  background: #f1f3f4;
  color: var(--g-ink);
}

.sidebar-menu-item.is-active {
  background: var(--g-blue-soft);
  color: #174ea6;
  box-shadow: none;
  font-weight: 600;
}

.sidebar-menu-item[data-action="sign-out"] {
  margin-left: auto !important;
  margin-top: 0 !important;
}

.app-main {
  grid-column: 1;
  grid-row: 3;
  padding: 34px 24px 64px;
  background: transparent;
}

.view {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  gap: 24px;
}

.page-hero {
  min-height: 0;
  padding: 14px 0 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.page-kicker::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--g-blue) 0 25%, var(--g-red) 0 50%, var(--g-yellow) 0 75%, var(--g-green) 0);
  box-shadow: inset 0 0 0 7px #fff;
  border: 1px solid var(--g-line-soft);
}

.page-hero h1 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  color: var(--g-ink);
  letter-spacing: -0.045em;
  font-weight: 700;
}

.page-hero p {
  max-width: 560px;
  margin-top: 12px;
  color: var(--g-muted);
  font-size: 16px;
  line-height: 1.65;
}

.page-hero-action {
  width: auto;
  height: 40px;
  min-width: 116px;
  padding: 0 20px;
  border-radius: 20px;
}

/* Material cards: outlined, restrained, readable */
.card,
.gradient-banner,
.tutorial-card,
.node-table,
.store-view .store-hero,
.m-plan-card,
.profile-banner,
.profile-stat-card,
.menu-list-item,
.support-card,
.plan-compare-wrap,
.extra-traffic-panel {
  background: var(--g-surface);
  color: var(--g-ink);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  box-shadow: none;
}

.card:hover,
.tutorial-card:hover,
.m-plan-card:hover,
.menu-list-item:hover,
.support-card:hover {
  transform: none;
  box-shadow: none;
  border-color: #c7cbd1;
}

.card {
  padding: 24px;
}

.card-title-row h3 {
  color: var(--g-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.card-title-link {
  color: var(--g-blue);
  font-weight: 600;
}

/* Home becomes Google One-style subscription overview */
@media (min-width: 961px) {
  .view[data-view="home"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
      "hero hero"
      "banner actions"
      "orders notice"
      "foot foot";
    gap: 24px;
    align-items: start;
  }

  .view[data-view="home"] > .page-hero { grid-area: hero; }
  .view[data-view="home"] > .gradient-banner { grid-area: banner; }
  .view[data-view="home"] > .actions-grid { grid-area: actions; }
  .view[data-view="home"] > .card:nth-of-type(2) { grid-area: notice; }
  .view[data-view="home"] > .card:nth-of-type(3) { grid-area: orders; }
  .view[data-view="home"] > .screen-footer { grid-area: foot; }
}

.gradient-banner {
  min-height: 420px;
  padding: 42px;
  border: 1px solid var(--g-line);
  background:
    radial-gradient(540px circle at 86% 10%, rgba(232, 240, 254, 0.95), transparent 46%),
    linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  color: var(--g-ink);
  overflow: hidden;
}

.gradient-banner::before {
  content: "";
  position: absolute;
  inset: auto 42px 42px auto;
  width: 172px;
  height: 172px;
  border-radius: 48px;
  background:
    linear-gradient(90deg, var(--g-blue) 0 50%, var(--g-red) 0 100%) top / 100% 50% no-repeat,
    linear-gradient(90deg, var(--g-yellow) 0 50%, var(--g-green) 0 100%) bottom / 100% 50% no-repeat;
  opacity: 0.16;
  transform: rotate(-10deg);
}

.gradient-banner::after {
  content: "VPN";
  position: absolute;
  right: 72px;
  bottom: 106px;
  color: rgba(32, 33, 36, 0.10);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.08em;
  transform: rotate(-10deg);
}

.gradient-banner *,
.banner-title {
  color: inherit;
}

.banner-header {
  align-items: flex-start;
}

.banner-title {
  display: block;
  max-width: 520px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.badge-green,
.badge-orange-light,
.badge-success,
.badge-top {
  border-radius: 999px;
}

.badge-green {
  background: var(--g-green-soft);
  color: #137333;
}

.gradient-banner .badge-green {
  background: var(--g-green-soft);
  color: #137333;
  border: 0;
}

.badge-orange-light {
  background: var(--g-yellow-soft);
  color: #b06000;
}

.banner-meta {
  margin-top: 18px;
  color: var(--g-muted);
  font-size: 14px;
}

.banner-traffic-info {
  margin-top: 46px;
  color: var(--g-ink);
}

.banner-traffic-tip {
  color: var(--g-muted);
}

.progress-bar-container {
  height: 10px;
  background: #edf0f5;
}

.progress-bar-fill {
  background: linear-gradient(90deg, var(--g-blue), var(--g-green));
}

.banner-footer-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.banner-stat-item {
  min-height: 72px;
  padding: 16px;
  border-radius: 20px;
  background: #f8fafd;
  border: 1px solid var(--g-line-soft);
  color: var(--g-muted);
}

.banner-stat-item strong {
  color: var(--g-ink);
  font-size: 18px;
}

.actions-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.action-btn {
  min-height: 74px;
  padding: 16px 18px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-radius: 22px;
  background: #fff;
}

.action-btn svg {
  width: 22px;
  height: 22px;
  padding: 9px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--g-blue-soft);
  color: var(--g-blue);
}

.action-btn:nth-child(2) svg { background: var(--g-green-soft); color: #137333; }
.action-btn:nth-child(3) svg { background: var(--g-yellow-soft); color: #b06000; }
.action-btn:nth-child(4) svg { background: var(--g-red-soft); color: #c5221f; }

.action-btn span {
  color: var(--g-ink);
  font-size: 15px;
  font-weight: 600;
}

.list-item,
.order-card-item {
  padding: 16px 0;
  border-bottom-color: var(--g-line-soft);
}

.announcement-title,
.order-detail-info b {
  color: var(--g-ink);
  font-weight: 500;
}

.announcement-date,
.order-detail-info small {
  color: var(--g-muted);
}

.order-icon-box,
.menu-icon-box,
.support-icon {
  border-radius: 50%;
  background: var(--g-blue-soft);
  color: var(--g-blue);
}

/* Subscription page: Google resource page with primary table below */
.view[data-view="subscription"] {
  gap: 22px;
}

.sub-tab-bar {
  position: static !important;
  align-self: stretch;
  width: 100%;
  height: 48px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-bottom: 1px solid var(--g-line-soft);
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  gap: 28px;
}

.sub-tab-item {
  min-width: auto;
  padding: 0;
  height: 48px;
  border-radius: 0;
  color: var(--g-muted);
  background: transparent;
  position: relative;
}

.sub-tab-item.is-active {
  background: transparent;
  color: var(--g-blue);
}

.sub-tab-item.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--g-blue);
}

.sub-scroll-content-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "info tutorial"
    "nodes nodes";
  gap: 24px !important;
}

#scroll-section-info,
#scroll-section-tutorial,
#scroll-section-nodes {
  position: static;
}

#scroll-section-info { grid-area: info; }
#scroll-section-tutorial { grid-area: tutorial; }
#scroll-section-nodes { grid-area: nodes; }

.link-display-box {
  min-height: 56px;
  border-radius: 28px;
  background: #f8fafd;
}

.link-input {
  color: var(--g-muted);
}

.link-buttons-row {
  display: flex;
  gap: 10px;
}

.link-buttons-row .primary-action,
.link-buttons-row .secondary-action {
  width: auto;
  flex: 1;
}

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

.tutorial-card {
  min-height: 118px;
  padding: 18px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.tutorial-card span {
  margin-left: 0;
  color: var(--g-blue);
}

.filter-row {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 8px;
}

.filter-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--g-line);
  background: #fff;
  color: var(--g-muted);
}

.filter-btn.is-selected {
  border-color: transparent;
  background: var(--g-blue-soft);
  color: #174ea6;
}

.node-table {
  border-radius: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.node-table th {
  background: transparent;
  color: var(--g-muted);
  border-bottom: 1px solid var(--g-line);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.node-table td {
  height: 64px;
  border-bottom: 1px solid var(--g-line-soft);
}

.node-table tr:hover td {
  background: #f8fafd;
}

/* Store: Google One pricing cards */
.store-view .store-hero {
  padding: 24px;
  border-radius: var(--g-radius-lg);
  background: #fff;
}

.store-hero-text strong {
  color: var(--g-ink);
  font-size: 22px;
  font-weight: 600;
}

.store-hero-text span,
.store-hint {
  color: var(--g-muted);
}

.store-balance-chip {
  background: var(--g-blue-soft);
  color: #174ea6;
  border: 0;
}

.m-level-scroll {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 8px;
}

.m-chip {
  height: 36px;
  border-radius: 18px;
  border: 1px solid var(--g-line);
  background: #fff;
  color: var(--g-muted);
}

.m-chip.is-active {
  border-color: transparent;
  background: var(--g-blue-soft);
  color: #174ea6;
}

.m-plan-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.m-plan-card {
  min-height: 390px;
  padding: 26px;
  border-radius: 24px;
  background: #fff;
}

.m-plan-card.is-selected {
  border-color: var(--g-blue);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-blue);
}

.m-plan-card .price,
.m-plan-card .m-plan-price {
  color: var(--g-ink);
  font-size: 34px;
  letter-spacing: -0.04em;
}

.m-plan-tag {
  background: var(--g-blue-soft);
  color: #174ea6;
}

.plan-compare-wrap,
.extra-traffic-panel {
  padding: 24px;
  border-radius: var(--g-radius-lg);
}

/* Account: Google Account settings feel */
@media (min-width: 961px) {
  .view[data-view="account"] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "profile stats"
      "profile menu"
      "support menu"
      "foot foot";
    gap: 24px;
  }
}

.profile-banner {
  min-height: 328px;
  padding: 30px;
  border-radius: var(--g-radius-lg);
  background:
    radial-gradient(260px circle at 88% 12%, rgba(26, 115, 232, 0.10), transparent 46%),
    #fff;
}

.avatar-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green), var(--g-blue));
  color: #fff;
}

.profile-info h2 {
  color: var(--g-ink);
  font-size: 28px;
}

.profile-info p {
  color: var(--g-muted);
}

.profile-stats-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.profile-stat-card {
  min-height: 148px;
  padding: 22px;
  border-radius: 24px;
}

.profile-stat-card small,
.menu-text-box small,
.support-text-details p {
  color: var(--g-muted);
}

.profile-stat-card strong {
  color: var(--g-ink);
  font-size: 28px;
  letter-spacing: -0.035em;
}

.profile-stat-card span {
  color: var(--g-blue);
  font-weight: 600;
}

.menu-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.menu-list-item {
  min-height: 112px;
  padding: 20px;
  border-radius: 24px;
  flex-direction: row;
  align-items: center;
}

.menu-text-box strong {
  color: var(--g-ink);
  font-size: 15px;
}

.support-card {
  border-radius: 24px;
}

.support-action-btn {
  height: 40px;
  border-radius: 20px;
  background: var(--g-blue);
  color: #fff;
}

/* Buttons / common */
.primary-action,
.secondary-action,
.support-action-btn,
.m-plan-cta,
.store-primary-btn {
  border-radius: 20px;
  font-weight: 600;
  box-shadow: none;
}

.primary-action,
.m-plan-cta,
.store-primary-btn {
  background: var(--g-blue);
  color: #fff;
  border: 1px solid var(--g-blue);
}

.primary-action:hover,
.m-plan-cta:hover,
.store-primary-btn:hover {
  background: #1765cc;
  border-color: #1765cc;
  transform: none;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.24);
}

.secondary-action {
  background: #fff;
  color: var(--g-blue);
  border: 1px solid var(--g-line);
}

.secondary-action:hover {
  background: #f8fafd;
  border-color: #c7d7fe;
}

.modal-card {
  border-radius: 28px;
  border: 1px solid var(--g-line);
  box-shadow: 0 12px 32px rgba(60, 64, 67, 0.18);
}

.toast-region .toast,
.toast {
  border-radius: 8px;
  background: #323232;
}

.screen-footer {
  color: var(--g-subtle);
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-rows: 60px minmax(0, 1fr) auto;
  }

  .app-header {
    grid-template-columns: auto 1fr auto;
    padding: 0 12px;
    gap: 10px;
  }

  .header-logo {
    min-width: 0;
  }

  .google-wordmark {
    font-size: 20px;
  }

  #header-title-text {
    display: none;
  }

  .header-search,
  .header-status-pill {
    display: none;
  }

  .header-btn[data-action="open-sidebar"] {
    display: inline-grid;
  }

  .sidebar-overlay {
    grid-row: 1 / -1;
    position: fixed;
    inset: 0;
    height: 100%;
    display: none;
    background: rgba(32, 33, 36, 0.35);
    border: 0;
    pointer-events: none;
  }

  .sidebar-overlay.is-open {
    display: block;
    pointer-events: auto;
  }

  .sidebar-backdrop {
    display: block !important;
    position: absolute;
    inset: 0;
  }

  .sidebar-drawer {
    width: min(86vw, 320px);
    height: 100%;
    margin: 0;
    padding: 12px;
    background: #fff;
    border-radius: 0 28px 28px 0;
    box-shadow: 0 16px 44px rgba(60, 64, 67, 0.24);
    transform: translateX(-105%) !important;
    transition: transform 0.22s ease;
  }

  .sidebar-overlay.is-open .sidebar-drawer {
    transform: translateX(0) !important;
  }

  .sidebar-header {
    display: flex !important;
    border-bottom: 0;
  }

  .sidebar-footer {
    display: block !important;
  }

  .sidebar-menu {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
  }

  .sidebar-menu-item {
    width: 100%;
    justify-content: flex-start;
  }

  .sidebar-menu-item[data-action="sign-out"] {
    margin-left: 0 !important;
  }

  .app-main {
    grid-row: 2;
    padding: 22px 16px 92px;
  }

  .page-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  .page-hero-action {
    width: 100%;
  }

  .gradient-banner {
    min-height: 0;
    padding: 26px;
  }

  .banner-title {
    font-size: 34px;
  }

  .banner-footer-stats,
  .actions-grid,
  .sub-scroll-content-group,
  .tutorial-grid,
  .m-plan-list,
  .profile-stats-row,
  .menu-list-grid {
    grid-template-columns: 1fr;
  }

  .sub-scroll-content-group {
    grid-template-areas:
      "info"
      "tutorial"
      "nodes";
  }

  .sub-tab-bar,
  .filter-row,
  .m-level-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .link-buttons-row {
    flex-direction: column;
  }

  .m-tabbar {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--g-line-soft);
  }
}

/* ==========================================================================
   FINAL: Google One-style shell override
   This is intentionally last. It replaces the old console skin while keeping
   all existing DOM IDs, routes, buttons, modals and API logic intact.
   ========================================================================== */

:root {
  --one-blue: #1a73e8;
  --one-blue-hover: #1765cc;
  --one-blue-soft: #e8f0fe;
  --one-green: #188038;
  --one-green-soft: #e6f4ea;
  --one-yellow-soft: #fef7e0;
  --one-red: #d93025;
  --one-red-soft: #fce8e6;
  --one-text: #202124;
  --one-muted: #5f6368;
  --one-subtle: #80868b;
  --one-line: #dadce0;
  --one-line-soft: #eef0f3;
  --one-page: #f8fafd;
  --one-card: #fff;
}

html,
body,
.desktop-app,
.app-container,
.app-shell {
  background: var(--one-page) !important;
  color: var(--one-text) !important;
  font-family: "Google Sans", "Product Sans", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body::before,
body::after,
.app-container::before,
.app-container::after,
.google-wordmark {
  display: none !important;
}

.app-container {
  background:
    radial-gradient(780px 420px at 50% -140px, rgba(232, 240, 254, 0.96), rgba(248, 250, 253, 0) 72%),
    var(--one-page) !important;
}

.app-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 64px 64px minmax(0, 1fr) !important;
}

.app-header {
  grid-row: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 620px) minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
  height: 64px !important;
  padding: 0 28px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--one-line-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.header-btn[data-action="open-sidebar"] {
  display: none !important;
}

.header-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--one-text) !important;
}

.brand-logo-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.product-wordmark,
#header-title-text {
  color: #5f6368 !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

.header-search {
  justify-self: center !important;
  width: min(100%, 620px) !important;
  height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 23px !important;
  background: #f1f3f4 !important;
  color: var(--one-muted) !important;
  box-shadow: none !important;
}

.header-search span {
  font-size: 0 !important;
}

.header-search span::before {
  content: "搜索订阅、节点和订单";
  font-size: 14px;
}

.header-actions {
  justify-self: end !important;
}

.header-status-pill {
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--one-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.header-btn {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--one-muted) !important;
}

.header-btn:hover {
  background: #f1f3f4 !important;
}

.sidebar-overlay {
  grid-row: 2 !important;
  position: sticky !important;
  top: 64px !important;
  z-index: 70 !important;
  display: block !important;
  height: 64px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--one-line-soft) !important;
  pointer-events: auto !important;
  backdrop-filter: blur(14px) !important;
}

.sidebar-backdrop,
.sidebar-header,
.sidebar-footer {
  display: none !important;
}

.sidebar-drawer {
  width: min(1180px, calc(100vw - 48px)) !important;
  height: 64px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  height: 64px !important;
  padding: 0 !important;
}

.sidebar-menu-item {
  width: auto !important;
  min-width: 96px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: var(--one-muted) !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

.sidebar-menu-item span {
  display: none !important;
}

.sidebar-menu-item[data-route="home"]::after { content: "首页"; }
.sidebar-menu-item[data-route="subscription"]::after { content: "订阅"; }
.sidebar-menu-item[data-route="store"]::after { content: "套餐"; }
.sidebar-menu-item[data-route="account"]::after { content: "账户"; }
.sidebar-menu-item[data-action="sign-out"]::after { content: "退出"; }
.sidebar-menu-item::after { font-size: 14px; white-space: nowrap; }

.sidebar-menu-item:hover {
  background: #f1f3f4 !important;
  color: var(--one-text) !important;
}

.sidebar-menu-item.is-active {
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
}

.sidebar-menu-item[data-action="sign-out"] {
  margin-left: auto !important;
  color: var(--one-red) !important;
}

.app-main {
  grid-row: 3 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 48px 24px 96px !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.view {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  gap: 24px !important;
}

.page-hero {
  position: relative !important;
  min-height: 176px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.page-hero::before {
  content: "";
  position: absolute;
  right: 0;
  top: -16px;
  width: 286px;
  height: 156px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 46%, rgba(66, 133, 244, 0.25) 0 18%, transparent 19%),
    radial-gradient(circle at 48% 32%, rgba(251, 188, 4, 0.26) 0 16%, transparent 17%),
    radial-gradient(circle at 68% 52%, rgba(52, 168, 83, 0.24) 0 18%, transparent 19%),
    radial-gradient(circle at 84% 36%, rgba(234, 67, 53, 0.18) 0 13%, transparent 14%);
  filter: blur(2px);
  opacity: 0.85;
  pointer-events: none;
}

.page-kicker {
  display: inline-flex !important;
  height: 32px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.page-hero h1,
.page-hero p {
  font-size: 0 !important;
}

.view[data-view="home"] .page-hero h1::before { content: "一个账号，管理你的专属网络"; }
.view[data-view="subscription"] .page-hero h1::before { content: "订阅与节点"; }
.view[data-view="store"] .page-hero h1::before { content: "选择适合你的会员方案"; }
.view[data-view="account"] .page-hero h1::before { content: "你的账号"; }

.page-hero h1::before {
  display: block;
  margin-top: 18px;
  color: var(--one-text);
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 500;
}

.view[data-view="home"] .page-hero p::before { content: "像管理 Google One 会员一样管理 VPN：订阅、流量、节点和账单都在一个清爽页面里。"; }
.view[data-view="subscription"] .page-hero p::before { content: "复制订阅链接、导入客户端、查看全部可用节点。底层订阅逻辑保持不变。"; }
.view[data-view="store"] .page-hero p::before { content: "按速度、流量和使用场景选择会员。购买流程保持原来的后端逻辑。"; }
.view[data-view="account"] .page-hero p::before { content: "查看余额、订单、安全设置和服务支持。"; }

.page-hero p::before {
  display: block;
  max-width: 680px;
  margin-top: 14px;
  color: var(--one-muted);
  font-size: 18px;
  line-height: 1.75;
}

.page-hero-action {
  height: 44px !important;
  margin-top: 42px !important;
  padding: 0 22px !important;
  border-radius: 22px !important;
}

.card,
.gradient-banner,
.profile-banner,
.profile-stat-card,
.menu-list-item,
.support-card,
.store-hero,
.store-hint,
.plan-compare-wrap,
.extra-traffic-panel,
.m-plan-card,
.modal-card {
  background: var(--one-card) !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  color: var(--one-text) !important;
}

.card:hover,
.m-plan-card:hover,
.menu-list-item:hover,
.tutorial-card:hover {
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.12) !important;
  transform: translateY(-1px) !important;
}

.view[data-view="home"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr) !important;
  grid-template-areas:
    "hero hero"
    "membership actions"
    "membership notice"
    "orders notice"
    "foot foot" !important;
  align-items: start !important;
}

.view[data-view="home"] > .page-hero { grid-area: hero !important; }
.view[data-view="home"] > .gradient-banner { grid-area: membership !important; }
.view[data-view="home"] > .actions-grid { grid-area: actions !important; }
.view[data-view="home"] > .card:nth-of-type(2) { grid-area: notice !important; }
.view[data-view="home"] > .card:nth-of-type(3) { grid-area: orders !important; }
.view[data-view="home"] > .screen-footer { grid-area: foot !important; }

.gradient-banner {
  position: relative !important;
  min-height: 430px !important;
  padding: 32px !important;
  overflow: hidden !important;
}

.gradient-banner::before {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -82px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--one-blue), #8ab4f8, var(--one-green), #fbbc04, #ea4335, var(--one-blue));
  opacity: 0.11;
}

.gradient-banner::after {
  content: "One";
  position: absolute;
  right: 34px;
  bottom: 22px;
  color: rgba(26, 115, 232, 0.08);
  font-size: 108px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.08em;
}

.banner-title {
  color: var(--one-text) !important;
  font-size: clamp(36px, 4.8vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  font-weight: 500 !important;
}

.banner-title::before {
  content: "当前会员：";
  display: block;
  margin-bottom: 14px;
  color: var(--one-muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.banner-meta,
.banner-traffic-tip,
.store-hero-text span,
.store-hint,
.m-plan-desc,
.plan-benefit-caption,
.plan-compare-head p,
.extra-traffic-head p,
.profile-info p,
.profile-stat-card small,
.menu-text-box small,
.support-text-details p {
  color: var(--one-muted) !important;
}

.progress-bar-container {
  height: 10px !important;
  border-radius: 999px !important;
  background: #eef0f3 !important;
}

.progress-bar-fill {
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--one-blue), #34a853) !important;
  box-shadow: none !important;
}

.badge-green,
.badge-success {
  background: var(--one-green-soft) !important;
  color: var(--one-green) !important;
  border: 0 !important;
}

.badge-orange-light {
  background: var(--one-yellow-soft) !important;
  color: #8f6400 !important;
  border: 0 !important;
}

.actions-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.action-btn {
  min-height: 82px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  color: var(--one-text) !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  font-size: 0 !important;
}

.action-btn:nth-child(1)::after { content: "复制订阅"; }
.action-btn:nth-child(2)::after { content: "导入教程"; }
.action-btn:nth-child(3)::after { content: "购买套餐"; }
.action-btn:nth-child(4)::after { content: "服务公告"; }
.action-btn::after { font-size: 16px; font-weight: 500; }

.action-btn svg,
.menu-icon-box,
.order-icon-box {
  border-radius: 50% !important;
  background: var(--one-blue-soft) !important;
  color: var(--one-blue) !important;
}

.action-btn svg {
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
}

.action-btn:nth-child(2) svg { background: var(--one-green-soft) !important; color: var(--one-green) !important; }
.action-btn:nth-child(3) svg { background: var(--one-yellow-soft) !important; color: #8f6400 !important; }
.action-btn:nth-child(4) svg { background: var(--one-red-soft) !important; color: var(--one-red) !important; }

.card {
  padding: 24px !important;
}

.card-title-row h3,
.plan-compare-head h3,
.extra-traffic-head h3 {
  color: var(--one-text) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.card-title-link,
.profile-stat-card span {
  color: var(--one-blue) !important;
  font-weight: 500 !important;
}

.list-item,
.order-card-item,
.tutorial-card {
  border-radius: 18px !important;
  border: 1px solid var(--one-line-soft) !important;
  background: #fff !important;
}

.sub-tab-bar {
  position: sticky !important;
  top: 128px !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 28px !important;
  padding: 0 !important;
  margin: -18px 0 6px !important;
  border-bottom: 1px solid var(--one-line) !important;
  background: rgba(248, 250, 253, 0.94) !important;
  backdrop-filter: blur(12px) !important;
}

.sub-tab-item {
  height: 48px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--one-muted) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

.sub-tab-item:nth-child(1)::after { content: "订阅信息"; }
.sub-tab-item:nth-child(2)::after { content: "节点列表"; }
.sub-tab-item:nth-child(3)::after { content: "订阅设置"; }
.sub-tab-item::after { font-size: 14px; }

.sub-tab-item.is-active {
  color: var(--one-blue) !important;
  box-shadow: inset 0 -3px 0 var(--one-blue) !important;
}

.sub-scroll-content-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-areas:
    "info tutorial"
    "nodes nodes" !important;
  gap: 24px !important;
}

#scroll-section-info { grid-area: info !important; }
#scroll-section-tutorial { grid-area: tutorial !important; }
#scroll-section-nodes { grid-area: nodes !important; }

.link-display-box {
  height: 56px !important;
  border-radius: 16px !important;
  border: 1px solid var(--one-line) !important;
  background: #f8fafd !important;
}

.tutorial-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.filter-row,
.m-level-scroll {
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.filter-btn,
.m-chip {
  height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--one-muted) !important;
  font-weight: 500 !important;
}

.filter-btn.is-selected,
.m-chip.is-active {
  border-color: transparent !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
}

.node-table th {
  background: #f8fafd !important;
  color: var(--one-muted) !important;
  font-weight: 500 !important;
}

.node-table td {
  border-top: 1px solid var(--one-line-soft) !important;
  color: var(--one-text) !important;
}

.store-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  padding: 28px !important;
  background: radial-gradient(360px 180px at 12% -20%, rgba(26, 115, 232, 0.12), transparent 70%), #fff !important;
}

.store-hero-text strong {
  color: var(--one-text) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
}

.store-balance-chip {
  height: 42px !important;
  border-radius: 21px !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
  border: 0 !important;
}

.m-plan-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.m-plan-card {
  position: relative !important;
  min-height: 410px !important;
  padding: 28px !important;
  overflow: hidden !important;
}

.m-plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--one-blue);
  opacity: 0;
}

.m-plan-card.is-selected {
  border-color: var(--one-blue) !important;
  box-shadow: inset 0 0 0 1px var(--one-blue) !important;
}

.m-plan-card.is-selected::before {
  opacity: 1;
}

.m-plan-name {
  color: var(--one-text) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

.m-plan-price {
  color: var(--one-text) !important;
  letter-spacing: -0.055em !important;
}

.m-plan-price b {
  font-size: 44px !important;
  font-weight: 500 !important;
}

.m-lv,
.m-tag {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--one-blue-soft) !important;
  color: #174ea6 !important;
}

.m-buy-bar {
  left: 50% !important;
  right: auto !important;
  bottom: 22px !important;
  width: min(720px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) !important;
  border: 1px solid var(--one-line) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 30px rgba(60, 64, 67, 0.16) !important;
}

.view[data-view="account"] {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  grid-template-areas:
    "hero hero"
    "profile stats"
    "profile menu"
    "support menu"
    "foot foot" !important;
  align-items: start !important;
}

.view[data-view="account"] > .page-hero { grid-area: hero !important; }
.view[data-view="account"] > .profile-banner { grid-area: profile !important; }
.view[data-view="account"] > .profile-stats-row { grid-area: stats !important; }
.view[data-view="account"] > .menu-list-grid { grid-area: menu !important; }
.view[data-view="account"] > .support-card { grid-area: support !important; }
.view[data-view="account"] > .screen-footer { grid-area: foot !important; }

.profile-banner {
  min-height: 360px !important;
  padding: 32px !important;
  background: radial-gradient(260px 180px at 86% 12%, rgba(26, 115, 232, 0.10), transparent 72%), #fff !important;
}

.avatar-large {
  width: 104px !important;
  height: 104px !important;
  background: var(--one-blue) !important;
  color: #fff !important;
  font-size: 40px !important;
}

.profile-info h2,
.profile-stat-card strong,
.menu-text-box strong {
  color: var(--one-text) !important;
  font-weight: 500 !important;
}

.profile-stat-card strong {
  font-size: 28px !important;
  letter-spacing: -0.035em !important;
}

.profile-stats-row,
.menu-list-grid {
  display: grid !important;
  gap: 16px !important;
}

.profile-stats-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.menu-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.profile-stat-card {
  min-height: 150px !important;
  padding: 22px !important;
}

.menu-list-item {
  min-height: 112px !important;
  padding: 20px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}

.primary-action,
.secondary-action,
.support-action-btn,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn {
  height: 40px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.primary-action,
.m-buy-btn,
.m-plan-cta,
.store-primary-btn,
.support-action-btn {
  background: var(--one-blue) !important;
  border: 1px solid var(--one-blue) !important;
  color: #fff !important;
}

.secondary-action {
  background: #fff !important;
  border: 1px solid var(--one-line) !important;
  color: var(--one-blue) !important;
}

.screen-footer {
  color: var(--one-subtle) !important;
}

.m-tabbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--one-line-soft) !important;
  box-shadow: none !important;
}

.m-tab-item {
  color: var(--one-muted) !important;
}

.m-tab-item.is-active {
  color: var(--one-blue) !important;
}

@media (max-width: 1040px) {
  .view[data-view="home"],
  .view[data-view="account"],
  .sub-scroll-content-group {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }

  .view[data-view="home"] > *,
  .view[data-view="account"] > *,
  .sub-scroll-content-group > * {
    grid-area: auto !important;
  }

  .m-plan-list,
  .profile-stats-row,
  .menu-list-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .app-shell {
    grid-template-rows: 60px minmax(0, 1fr) auto !important;
  }

  .app-header {
    grid-template-columns: auto 1fr auto !important;
    height: 60px !important;
    padding: 0 14px !important;
  }

  .header-btn[data-action="open-sidebar"] {
    display: inline-grid !important;
  }

  .product-wordmark,
  #header-title-text {
    font-size: 19px !important;
  }

  .header-search,
  .header-status-pill {
    display: none !important;
  }

  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    height: auto !important;
    background: rgba(32, 33, 36, 0.35) !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  .sidebar-overlay.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .sidebar-backdrop,
  .sidebar-header,
  .sidebar-footer {
    display: block !important;
  }

  .sidebar-backdrop {
    position: absolute !important;
    inset: 0 !important;
  }

  .sidebar-header {
    display: flex !important;
  }

  .sidebar-drawer {
    position: relative !important;
    width: min(86vw, 320px) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 0 28px 28px 0 !important;
    background: #fff !important;
    box-shadow: 0 16px 44px rgba(60, 64, 67, 0.24) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.22s ease !important;
  }

  .sidebar-overlay.is-open .sidebar-drawer {
    transform: translateX(0) !important;
  }

  .sidebar-menu {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 0 !important;
  }

  .sidebar-menu-item {
    width: 100% !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .sidebar-menu-item[data-action="sign-out"] {
    margin-left: 0 !important;
  }

  .app-main {
    grid-row: 2 !important;
    padding: 30px 16px 92px !important;
  }

  .page-hero {
    min-height: 0 !important;
    flex-direction: column !important;
  }

  .page-hero h1::before {
    font-size: 38px;
  }

  .page-hero p::before {
    font-size: 16px;
  }

  .page-hero-action {
    width: 100% !important;
    margin-top: 8px !important;
  }

  .gradient-banner {
    min-height: 0 !important;
    padding: 26px !important;
  }

  .banner-title {
    font-size: 36px !important;
  }

  .sub-tab-bar {
    top: 60px !important;
    overflow-x: auto !important;
    gap: 22px !important;
  }
}