:root {
  --xhs-toolbar-height: 116px;
  --xhs-shell-reserve: 88px;
  --xhs-contact-ink: var(--text);
  --xhs-contact-muted: var(--muted);
  --xhs-contact-line: var(--line);
  --xhs-contact-warm: var(--surface-2);
}

/* 小红书容器专用双层顶栏，不改变任何按钮事件或业务状态。 */
@media (orientation: portrait), (max-width: 720px) {
  .workspace-bar {
    height: calc(var(--xhs-toolbar-height) + var(--top-safe)) !important;
    min-height: calc(var(--xhs-toolbar-height) + var(--top-safe)) !important;
    max-height: calc(var(--xhs-toolbar-height) + var(--top-safe)) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 52px 64px !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: var(--top-safe) 4px 0 !important;
    overflow: visible !important;
  }

  .workspace-identity {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    padding-inline: var(--xhs-shell-reserve) !important;
    text-align: center !important;
  }

  .workspace-title-button { justify-content: center !important; }
  .workspace-title { display: block; width: 100%; text-align: center; }
  .workspace-identity .project-status { display: none !important; }
  .history-actions, .shared-workspace-actions, .project-actions { display: contents !important; }
  .landscape-project-actions, #quickRenderBtn { display: none !important; }

  #undoBtn { grid-column: 1; grid-row: 2; }
  #redoBtn { grid-column: 2; grid-row: 2; }
  #toolbarHistoryBtn { grid-column: 3; grid-row: 2; }
  #toolbarFocusBtn { grid-column: 4; grid-row: 2; }
  #toolbarSmartBoardBtn { grid-column: 5; grid-row: 2; }
  #toolbarCloudBeadBtn { grid-column: 6; grid-row: 2; }
  #moreActionsBtn { grid-column: 7; grid-row: 2; }

  .workspace-bar .toolbar-action,
  body[data-toolbar-labels="hidden"] .workspace-bar .toolbar-action {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 5px 1px 6px !important;
    flex-direction: column !important;
    gap: 3px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .workspace-bar .toolbar-icon { width: 21px !important; height: 21px !important; flex-basis: 21px !important; }
  .workspace-bar .action-label,
  body[data-toolbar-labels="hidden"] .workspace-bar .action-label {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis;
  }
  #undoBtn::after { content: "撤销"; }
  #redoBtn::after { content: "恢复"; }
  #toolbarHistoryBtn::after { content: "历史记录"; }

  .preview-shell {
    inset: calc(var(--xhs-toolbar-height) + var(--top-safe)) 0 0 !important;
  }
  .panel {
    inset: calc(var(--xhs-toolbar-height) + var(--top-safe)) 0 0 !important;
    height: calc(100dvh - var(--xhs-toolbar-height) - var(--top-safe)) !important;
  }

  .surface-header {
    display: grid !important;
    position: relative !important;
    grid-template-columns: 88px minmax(0, 1fr) calc(44px + var(--xhs-shell-reserve)) !important;
    align-items: center !important;
  }
  .surface-header > :first-child { justify-self: end !important; }
  .surface-header > :nth-child(2) { position: absolute !important; left: 50% !important; justify-self: auto !important; text-align: center !important; transform: translateX(-50%) !important; }
  .surface-header > :last-child { justify-self: start !important; }
  .cloud-bead-head > div:nth-child(2) { display: contents !important; position: static !important; transform: none !important; }
  .cloud-bead-head > div:nth-child(2) > h2 { position: absolute !important; left: 50% !important; margin: 0 !important; text-align: center !important; transform: translateX(-50%) !important; }
}

@media (orientation: landscape) and (min-width: 721px) {
  .workspace-bar {
    grid-template-columns: minmax(4px, 1fr) auto auto minmax(156px, 240px) auto auto minmax(4px, 1fr) !important;
    gap: 4px !important;
    padding-inline: 6px !important;
  }
  .shared-workspace-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .history-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .workspace-identity { grid-column: 4; grid-row: 1; justify-self: stretch; text-align: center; }
  .workspace-title-button { justify-content: center; }
  .landscape-project-actions { grid-column: 5; grid-row: 1; justify-self: start; }
  .project-actions { grid-column: 6; grid-row: 1; justify-self: start; }
  .workspace-bar .toolbar-action { padding-inline: 6px !important; gap: 3px !important; }
  .workspace-bar .action-label { font-size: 11px; }
}

#advancedCropCancelBtn,
#cloudBeadBackBtn,
#smartBoardBackBtn,
#focusBackBtn {
  visibility: visible !important;
  pointer-events: auto !important;
}

.xhs-welcome-contact,
.xhs-about-contact { color: var(--xhs-contact-ink); }

.xhs-welcome-contact {
  display: grid;
  gap: 7px;
  width: min(100%, 560px);
  margin-top: 10px;
  text-align: left;
}

.xhs-welcome-contact .xhs-contact-card {
  gap: 4px;
  padding: 8px 11px;
  border-radius: 14px;
}

.xhs-welcome-contact .xhs-contact-kicker { font-size: 10px; }
.xhs-welcome-contact .xhs-contact-card p { font-size: 11px; line-height: 1.3; }
.xhs-welcome-contact .xhs-contact-value-row > span { font-size: 12px; }
.xhs-welcome-contact .xhs-contact-value-row strong { font-size: 13px; }
.xhs-welcome-contact .xhs-contact-card small { font-size: 9px; line-height: 1.25; }
.xhs-welcome-contact .xhs-copy-button { min-width: 64px; min-height: 30px; padding-inline: 10px; font-size: 11px; }

.xhs-about-contact {
  display: grid;
  gap: 14px;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 6px 0 12px;
}

.xhs-about-contact > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 2px;
}

.xhs-about-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: none;
  object-fit: contain;
}

.xhs-about-contact header strong { display: block; font-size: 17px; }
.xhs-about-contact header p { margin: 3px 0 0; color: var(--xhs-contact-muted); font-size: 12px; }

.xhs-contact-card {
  display: grid;
  gap: 8px;
  padding: 14px 15px;
  border: 1px solid var(--xhs-contact-line);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: none;
}

.xhs-contact-card-site { background: var(--surface-2); }
.xhs-contact-kicker { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.xhs-contact-card-site .xhs-contact-kicker { color: var(--muted); }
.xhs-contact-card p { margin: 0; color: var(--xhs-contact-muted); font-size: 13px; }
.xhs-contact-card small { color: var(--xhs-contact-muted); font-size: 11px; line-height: 1.45; }

.xhs-contact-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.xhs-contact-value-row > span { min-width: 0; font-size: 14px; line-height: 1.45; }
.xhs-contact-value-row strong { font-size: 16px; letter-spacing: .025em; user-select: text; -webkit-user-select: text; }
.xhs-contact-url {
  overflow: hidden;
  color: var(--accent);
  font-size: 12px !important;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
}

.xhs-copy-button {
  min-width: 72px;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
}

.xhs-contact-card-site .xhs-copy-button {
  border-color: var(--line);
  color: var(--accent);
  background: var(--accent-soft);
}

@media (max-height: 760px) and (orientation: portrait) {
  .xhs-welcome-contact { gap: 5px; margin-top: 7px; }
  .xhs-welcome-contact .xhs-contact-card { gap: 3px; padding: 6px 10px; }
  .xhs-welcome-contact .xhs-contact-card small { display: none; }
}
/* 小红书竖屏顶栏：标题与安全区下方的左侧按钮共用同一条中线。 */
@media (orientation: portrait), (max-width: 720px) {
  .advanced-crop-head.surface-header,
  .smart-sidebar-head.surface-header,
  .cloud-bead-head.surface-header {
    box-sizing: border-box !important;
    height: calc(var(--top-safe) + 56px) !important;
    min-height: calc(var(--top-safe) + 56px) !important;
    padding-top: var(--top-safe) !important;
    padding-bottom: 0 !important;
  }

  .advanced-crop-head.surface-header > h2,
  .smart-sidebar-head.surface-header > h2,
  .cloud-bead-head > div:nth-child(2) > h2 {
    display: flex !important;
    top: var(--top-safe) !important;
    bottom: auto !important;
    height: 56px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    transform: translateX(-50%) !important;
  }

  /* 更多菜单避开小红书双层顶栏，从完整顶栏下方展开。 */
  .workspace-menu-popover {
    top: calc(var(--top-safe) + var(--xhs-toolbar-height) + 6px) !important;
    max-height: calc(100dvh - var(--top-safe) - var(--xhs-toolbar-height) - 18px) !important;
  }
}