/* 方格旗仅用于玻璃表面的淡纹理；布局与文字层级保持一致。 */
:root {
  --race-surface: #ffffffa8;
  --race-nav: #ffffffae;
  --race-edge: #ffffffdc;
  --race-line: #91b9c536;
  --race-check: #257b880e;
  --race-shadow: #3166790c;
  --race-highlight: #ffffffd4;
  --race-menu: #fffffffa;
}
[data-theme=dark] {
  --race-surface: #19323dba;
  --race-nav: #172d38cc;
  --race-edge: #b6e1e324;
  --race-line: #86b9c22e;
  --race-check: #a4dfe91c;
  --race-shadow: #00000020;
  --race-highlight: #c1e8ec13;
  --race-menu: #182b34fa;
}
body:has(.workspace) {
  background-image:
    radial-gradient(ellipse at 12% 12%, var(--color-tint), transparent 55%),
    radial-gradient(ellipse at 94% 55%, var(--color-soft), transparent 60%);
}
.brand { letter-spacing: .5px; }
.brand img { width: 44px; height: 44px; filter: drop-shadow(0 3px 5px #087d8815); }
.brand:hover img { transform: translateY(-1px); }
.sidebar, .public-header {
  isolation: isolate;
  background: var(--race-nav);
  border-bottom-color: var(--race-edge);
  box-shadow: 0 1px 0 var(--race-line), 0 5px 20px var(--race-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
}
.public-header { position: relative; z-index: 30; }
.topbar { position: relative; z-index: 15; }
.sidebar::before, .public-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 0 48%;
  pointer-events: none;
  background-image: repeating-conic-gradient(var(--race-check) 0% 25%, transparent 0% 50%);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(110deg, transparent 12%, #0009 70%, #0003);
  mask-image: linear-gradient(110deg, transparent 12%, #0009 70%, #0003);
}
.main .card, .grid.overview-stats, .account-navigation {
  position: relative;
  isolation: isolate;
  background: var(--race-surface);
  border-color: var(--race-edge);
  box-shadow: inset 0 1px 0 var(--race-highlight), 0 0 0 1px var(--race-line), 0 10px 34px var(--race-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.main .card::after, .grid.overview-stats::after, .account-navigation::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-conic-gradient(var(--race-check) 0% 25%, transparent 0% 50%) right bottom / 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 110% 100%, #000 0%, transparent 63%);
  mask-image: radial-gradient(ellipse at 110% 100%, #000 0%, transparent 63%);
}
.main .overview-stats .card { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.main .overview-stats .card::after { display: none; }
.main .plan.featured { border-color: var(--color-primary); }
.main .current-plan { border-left-color: var(--color-primary); }
.main table th { background: var(--color-soft); }
.main .notice { background: var(--race-surface); border-color: var(--race-line); }
.account-navigation nav a.active { box-shadow: inset 0 1px 0 var(--race-highlight); }
.user-dropdown { background: var(--race-menu); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.auth-visual img { animation: none; margin: 8px 0 14px; }
.auth-visual .eyebrow::before { background: #ba9357; box-shadow: 0 0 0 5px #d7bd8521; }
@media(max-width:600px) {
  .sidebar { background: var(--race-nav); }
  .sidebar::before { inset: 0; }
  .sidebar > nav a { background-color: transparent; }
  .sidebar > nav a.active { background-color: var(--color-soft); }
  .topbar { background: var(--race-nav); box-shadow: 0 1px 0 var(--race-line); }
  .main .card::after { background-size: 32px 32px; }
  .brand img { width: 40px; height: 40px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .main .card, .grid.overview-stats, .account-navigation, .sidebar { background-color: var(--color-surface); }
}