:root {
  --will-native-safe-top: 0px;
  --will-native-safe-right: 0px;
  --will-native-safe-bottom: 0px;
  --will-native-safe-left: 0px;
  --will-safe-top: max(env(safe-area-inset-top, 0px), var(--will-native-safe-top));
  --will-safe-right: max(env(safe-area-inset-right, 0px), var(--will-native-safe-right));
  --will-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--will-native-safe-bottom));
  --will-safe-left: max(env(safe-area-inset-left, 0px), var(--will-native-safe-left));
  --will-shell-surface: #f4f6fb;
}

@media (prefers-color-scheme: dark) {
  :root { --will-shell-surface: #080b12; }
}

html.is-native-shell {
  min-height: 100%;
  background-color: var(--will-shell-surface);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.is-native-shell body {
  min-height: 100dvh;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}

html.is-native-shell button,
html.is-native-shell a,
html.is-native-shell input,
html.is-native-shell select,
html.is-native-shell textarea {
  touch-action: manipulation;
}

html.is-native-shell .site-install-entry,
html.is-native-shell .site-desktop-entry,
html.is-native-shell [data-open-install-dialog],
html.is-native-shell [data-open-desktop-dialog] {
  display: none !important;
}

html.is-native-shell:not(.is-pwa-shell) #webPushSettingsCard {
  display: none !important;
}

html.is-native-shell:not(.is-pwa-shell) #passkeySettingsCard {
  display: none !important;
}

html.is-native-shell.native-supports-passkeys #passkeySettingsCard {
  display: block !important;
}

/* App 首页：IPA 与已安装 PWA 共用同一排版；普通 Safari/浏览器保留网页工作台。 */
.native-dashboard-home {
  display: none;
}

html.is-native-shell body.page-dashboard {
  --native-app-bg: #f3f5fa;
  --native-app-card: rgba(255, 255, 255, .82);
  --native-app-card-solid: #fff;
  --native-app-line: rgba(19, 28, 47, .075);
  --native-app-text: #141821;
  --native-app-muted: #737b8b;
  --native-app-blue: #5578ff;
  color: var(--native-app-text);
  background:
    radial-gradient(circle at 9% 3%, rgba(116, 142, 255, .13), transparent 27rem),
    radial-gradient(circle at 92% 12%, rgba(82, 208, 187, .10), transparent 22rem),
    var(--native-app-bg);
}

html.is-native-shell body.page-dashboard .site-header {
  display: flex;
  flex-direction: row;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  top: 0;
  min-height: 0;
  padding: calc(var(--will-safe-top) + 4px) max(14px, var(--will-safe-right)) 3px max(14px, var(--will-safe-left));
  border-bottom: 1px solid var(--native-app-line);
  background: color-mix(in srgb, var(--native-app-bg) 84%, transparent);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(145%);
}

html.is-native-shell body.page-dashboard .site-header .brand {
  order: 0;
  min-width: 0;
  align-self: center;
  gap: 10px;
}

html.is-native-shell body.page-dashboard .site-header .brand-avatar,
html.is-native-shell body.page-dashboard .site-header .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

html.is-native-shell body.page-dashboard .site-header .brand strong {
  color: var(--native-app-text);
  font-size: 14px;
  letter-spacing: -.02em;
}

html.is-native-shell body.page-dashboard .site-header .brand small,
html.is-native-shell body.page-dashboard .site-nav {
  display: none !important;
}

html.is-native-shell body.page-dashboard .site-header-actions {
  display: block;
  order: 1;
  width: auto;
  margin-left: auto;
}

html.is-native-shell body.page-dashboard .site-utility-actions {
  display: flex;
  grid-column: auto;
  width: auto;
  gap: 7px;
}

html.is-native-shell body.page-dashboard .site-utility-button {
  min-width: 32px;
  min-height: 32px;
  padding: 0 9px;
  color: var(--native-app-text);
  border: 1px solid var(--native-app-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 5px 18px rgba(31, 42, 67, .06);
}

html.is-native-shell body.page-dashboard .site-utility-button:active {
  transform: scale(.96);
}

html.is-native-shell body.page-dashboard .page-shell {
  width: min(760px, 100%);
  padding: 14px max(16px, var(--will-safe-right)) calc(96px + var(--will-safe-bottom)) max(16px, var(--will-safe-left));
}

html.is-native-shell body.page-dashboard[data-auth-state="member"] .page-shell {
  width: 100%;
  padding-right: max(8px, var(--will-safe-right));
  padding-left: max(8px, var(--will-safe-left));
}

@media (max-width: 760px) {
  body[data-auth-state="member"] main.page-shell {
    width: 100%;
    max-width: none;
    padding-right: max(8px, var(--will-safe-right));
    padding-left: max(8px, var(--will-safe-left));
  }

  body[data-auth-state="member"] main.page-shell > section,
  body[data-auth-state="member"] main.page-shell > div {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }
}

html.is-native-shell body.page-dashboard .native-dashboard-home {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  z-index: 40;
  display: block;
  padding: 4px max(12px, var(--will-safe-right)) max(4px, var(--will-safe-bottom)) max(12px, var(--will-safe-left));
  border: 0;
  border-radius: 22px 22px 0 0;
  /* Dock 以下的 Home Indicator 安全区也属于材质层，不能让正文从底部穿透。 */
  isolation: isolate;
  background: rgba(244, 247, 253, .06);
  box-shadow: 0 -6px 18px rgba(31, 42, 67, .025);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

/* 低对比的光线与网格只作为玻璃的折射底图，不承担信息展示。 */
html.is-native-shell body.page-dashboard .native-dashboard-home::before {
  content: none;
}

html.is-native-shell body.page-dashboard .dashboard-hero,
html.is-native-shell body.page-dashboard .dashboard-entry-grid {
  display: none !important;
}

.native-dashboard-dock {
  position: relative;
  width: 350px;
  height: 72px;
  max-width: calc(100dvw - 24px);
  margin: 0 auto;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 25px;
  isolation: isolate;
  background: rgba(241, 245, 252, .20);
  box-shadow: 0 12px 30px rgba(31, 42, 67, .16), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  overflow: visible;
  touch-action: none;
  --wg-render: true;
  --wg-shape: squircle;
  --wg-refraction: 1.45;
  --wg-bezel: 0.3;
  --wg-scale: 34;
  --wg-blur: 14;
  --wg-light-angle: -55;
  --wg-specular-strength: 0.62;
  --wg-specular-width: 0.3;
  --wg-specular-edge: 0.05;
  --wg-specular-back: 0.2;
  --wg-bg-opacity: 0.10;
}

/* SVG 折射层与可交互内容明确分层，避免互相遮盖。 */
.native-dashboard-dock .wg-layer {
  z-index: 0 !important;
}

.native-dashboard-dock-track,
.native-dashboard-dock > :not(.wg-layer) {
  z-index: 1;
}

html.is-native-shell body.page-dashboard .native-dashboard-home > .native-dashboard-dock,
html.is-native-shell body.page-dashboard .native-dashboard-home > .native-more-panel {
  z-index: 1;
}

.native-dashboard-dock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .34);
  background: linear-gradient(118deg, rgba(255, 255, 255, .08), transparent 24%, transparent 68%, rgba(137, 151, 255, .06));
  mix-blend-mode: screen;
}

.native-dashboard-dock-track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.native-dashboard-dock-items {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  gap: 3px;
  will-change: transform;
}

.native-dashboard-app {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 53px;
  height: 62px;
  padding: 0 2px;
  color: var(--native-app-text);
  border-radius: 16px;
  background: transparent;
  text-decoration: none;
  transition: background-color 160ms ease;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.native-dashboard-app:active {
  transform: scale(.94);
  background: rgba(85, 120, 255, .08);
}

.native-dashboard-app-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: var(--dock-accent, #60708a);
  border: 1px solid color-mix(in srgb, var(--dock-accent, #60708a) 8%, rgba(255,255,255,.54));
  border-radius: 13px;
  background: color-mix(in srgb, var(--dock-accent, #60708a) 9%, rgba(255,255,255,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 5px 12px color-mix(in srgb, var(--dock-accent, #60708a) 9%, transparent);
  transform-origin: 50% 100%;
  will-change: transform;
  transition: background-color 160ms ease, color 160ms ease;
}

.native-dashboard-app-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.native-dashboard-app.is-create { --dock-accent: #5a70e8; }
.native-dashboard-app.is-director { --dock-accent: #3f8fa6; }
.native-dashboard-app.is-us { --dock-accent: #da6686; }
.native-dashboard-app.is-personal { --dock-accent: #7a6ad8; }
.native-dashboard-app.is-home { --dock-accent: #4e9a79; }
.native-dashboard-app.is-more { --dock-accent: #667085; }

.native-dashboard-app b {
  color: #4c5465;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}

.native-dashboard-app.is-active .native-dashboard-app-icon {
  color: #fff;
  border-color: color-mix(in srgb, var(--dock-accent) 72%, rgba(255,255,255,.28));
  background: linear-gradient(145deg, color-mix(in srgb, var(--dock-accent) 88%, #fff), var(--dock-accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 7px 16px color-mix(in srgb, var(--dock-accent) 28%, transparent);
}

.native-dashboard-app.is-active b {
  color: var(--dock-accent);
  font-weight: 700;
}

button.native-dashboard-app {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.native-dashboard-app .site-us-unread-dot {
  position: absolute;
  top: 2px;
  right: 3px;
}

.native-more-panel {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: calc(100% + 12px);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: min(356px, calc(100dvw - 28px));
  max-height: calc(100dvh - 150px);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 24px;
  background: color-mix(in srgb, #ffffff 90%, transparent);
  box-shadow: 0 22px 48px rgba(31, 42, 67, .22), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  overflow-y: auto;
  transform: translateX(-50%);
}

.native-more-panel.is-open {
  display: grid;
  animation: native-more-in 220ms cubic-bezier(.23, 1, .32, 1) both;
}

.native-more-panel a,
.native-more-panel button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 12px 11px;
  border: 1px solid rgba(31, 42, 67, .06);
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
  color: var(--native-app-text);
  text-decoration: none;
  text-align: left;
  transition: transform 120ms ease, background-color 140ms ease;
}

.native-more-panel button {
  width: 100%;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.native-more-panel a:active,
.native-more-panel button:active {
  transform: scale(.97);
  background: rgba(85, 120, 255, .1);
}

.native-more-panel strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.native-more-panel small {
  color: var(--native-app-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

@keyframes native-more-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

html.is-native-shell body.page-dashboard .dashboard-ai-brief {
  margin: 0;
  border-color: var(--native-app-line);
  border-radius: 22px;
  background: var(--native-app-card);
  box-shadow: 0 12px 34px rgba(31, 42, 67, .065);
}

@media (max-width: 879px) {
  html.is-native-shell body.page-dashboard .dashboard-ai-brief {
    width: 100%;
    margin-right: 0;
  }
}

html.is-native-shell body.page-dashboard .dashboard-top-row {
  margin-top: 28px;
}

html.is-native-shell body.page-dashboard .dashboard-overview {
  margin-top: 30px;
}

html.is-native-shell body.page-dashboard .dashboard-overview > .section-heading {
  align-items: end;
}

html.is-native-shell body.page-dashboard .dashboard-overview .panel-kicker {
  color: var(--native-app-blue);
}

html.is-native-shell body.page-dashboard .dashboard-overview #overviewTitle {
  color: var(--native-app-text);
  font-size: 26px;
  letter-spacing: -.04em;
}

html.is-native-shell body.page-dashboard .dashboard-widget-grid {
  gap: 14px;
}

html.is-native-shell body.page-dashboard .dashboard-widget-grid > .dashboard-layout-item {
  border-color: var(--native-app-line);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(31, 42, 67, .065);
}

html.is-native-shell body.page-dashboard .site-footer {
  display: none;
}

@media (prefers-color-scheme: dark) {
  html.is-native-shell body.page-dashboard {
    --native-app-bg: #0b0e15;
    --native-app-card: rgba(24, 29, 41, .82);
    --native-app-card-solid: #1a202d;
    --native-app-line: rgba(255, 255, 255, .075);
    --native-app-text: #f5f7fb;
    --native-app-muted: #929bad;
    background:
      radial-gradient(circle at 8% 0, rgba(88, 111, 222, .16), transparent 25rem),
      radial-gradient(circle at 95% 14%, rgba(45, 154, 143, .11), transparent 22rem),
      var(--native-app-bg);
  }

  html.is-native-shell body.page-dashboard .site-utility-button {
    background: rgba(30, 36, 50, .7);
  }

  html.is-native-shell body.page-dashboard .native-dashboard-home {
    background: rgba(12, 16, 24, .10);
  }

  html.is-native-shell body.page-dashboard .native-dashboard-home::before {
    content: none;
  }

  html.is-native-shell body.page-dashboard .native-dashboard-dock {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(25, 30, 42, .20);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .14);
    --wg-bg-opacity: 0.12;
    --wg-specular-strength: 0.5;
  }

  .native-dashboard-dock::after {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(118deg, rgba(255, 255, 255, .10), transparent 25%, transparent 68%, rgba(126, 102, 255, .12));
  }

  html.is-native-shell body.page-dashboard .native-dashboard-app-icon {
    color: #c3cad9;
    background: transparent;
  }

  html.is-native-shell body.page-dashboard .native-dashboard-app.is-active .native-dashboard-app-icon {
    color: #8fb0ff;
    background: rgba(126, 162, 255, .18);
  }

  html.is-native-shell body.page-dashboard .native-dashboard-app b {
    color: #c7cede;
  }

  html.is-native-shell body.page-dashboard .native-dashboard-app.is-active b {
    color: #8fb0ff;
  }

  html.is-native-shell body.page-dashboard .native-more-panel {
    border-color: rgba(255, 255, 255, .13);
    background: color-mix(in srgb, #161c28 90%, transparent);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .1);
  }

  html.is-native-shell body.page-dashboard .native-more-panel a,
  html.is-native-shell body.page-dashboard .native-more-panel button {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
  }
}

.native-network-banner {
  position: fixed;
  z-index: 10050;
  top: calc(var(--will-safe-top) + .55rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100dvw - var(--will-safe-left) - var(--will-safe-right) - 2rem);
  padding: .65rem .9rem;
  color: #fff;
  font-size: .82rem;
  line-height: 1.25;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(98, 35, 46, .92);
  box-shadow: 0 12px 34px rgba(28, 7, 12, .28);
  backdrop-filter: blur(18px) saturate(140%);
  transform: translateX(-50%);
}

.native-network-banner[hidden] { display: none !important; }
.native-network-banner span {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffb6c4;
}

@media (max-width: 760px) {
  html.is-native-shell input,
  html.is-native-shell select,
  html.is-native-shell textarea {
    font-size: max(16px, 1em);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .native-network-banner { backdrop-filter: none; background: #742b3a; }
  html.is-native-shell body.page-dashboard .site-header,
  html.is-native-shell body.page-dashboard .native-dashboard-home,
  html.is-native-shell body.page-dashboard .native-dashboard-dock,
  html.is-native-shell body.page-dashboard .dashboard-ai-brief {
    backdrop-filter: none;
    background: var(--native-app-card-solid);
  }

  .native-dashboard-dock .wg-layer {
    display: none;
  }

  html.is-native-shell body.page-dashboard .native-dashboard-home::before,
  .native-dashboard-dock::after {
    display: none;
  }

  .native-more-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--native-app-card-solid);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-native-shell *,
  html.is-native-shell *::before,
  html.is-native-shell *::after {
    scroll-behavior: auto !important;
  }

  html.is-native-shell body.page-dashboard .native-dashboard-app {
    transition: none;
  }
}