/* ==========================================================================
   欧展通 EuroExpo Desk · pages/app.css（P8，2026-10-05）
   业务页（inquiry / member / suppliers / review / requests / account / tools）主体样式：
   旧 intake.css / requests.css / account.css 的业务规则按 tokens 重写，作用域限定在 .app-body；
   页眉页脚四语片段 [data-lang] 按 <html lang> 显示；.hidden / [hidden] 为业务 JS 的显隐契约。
   依赖：tokens.css、base.css、components.css 先加载。
   ========================================================================== */
@layer pages {
  /* ---- 1. 页眉 / 页脚 / 移动端菜单的四语片段（language.js 在 head 内同步设置 <html lang>；无 JS 显示英文） ---- */
  .site-header [data-lang],
  .nav-mobile [data-lang],
  .site-footer [data-lang] {
    display: none;
  }

  html:not([lang="zh-CN"]):not([lang="de"]):not([lang="nl"]) :is(.site-header, .nav-mobile, .site-footer) [data-lang="en"],
  html[lang="zh-CN"] :is(.site-header, .nav-mobile, .site-footer) [data-lang="zh-CN"],
  html[lang="de"] :is(.site-header, .nav-mobile, .site-footer) [data-lang="de"],
  html[lang="nl"] :is(.site-header, .nav-mobile, .site-footer) [data-lang="nl"] {
    display: inline;
  }

  /* 页脚底栏的 ?lang= 链接列表与公开页同款 .lang-links */
  .nav-mobile__footer .lang-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* ---- 2. 显隐契约（业务 JS 用 classList 切 .hidden；平台页用 [hidden]） ---- */
  .app-body .hidden,
  .hidden {
    display: none !important;
  }

  /* ---- 3. 页面骨架 ---- */
  .app-body {
    --app-max: 800px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-block: var(--space-6) var(--section-y);
  }

  .app-body--wide {
    --app-max: none;
  }

  .app-body > :not(.app-head, .app-subnav) {
    width: 100%;
    max-width: var(--app-max);
  }

  .app-head {
    padding-block: var(--space-2) var(--space-4);
  }

  .app-head .page-head__copy > h1 {
    margin-bottom: var(--space-3);
  }

  .app-head .page-head__copy > .lead {
    max-width: 60ch;
  }

  .app-head .eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-text);
    margin-bottom: var(--space-2);
  }

  .app-head .demo {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--info-text);
    font-size: var(--text-xs);
    line-height: 1.5;
  }

  .app-head .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  @media (max-width: 1023.98px) {
    .app-head__art {
      display: none;
    }
  }

  /* 子导航：旧页眉里的页内链接（业务 JS 仍按 id / data-route 改写 href） */
  .app-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .app-body .app-subnav > a,
  .app-body .app-subnav > button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-nav);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  }

  .app-body .app-subnav > a:hover,
  .app-body .app-subnav > button:hover {
    background: var(--gray-100);
    color: var(--color-text);
    text-decoration: none;
  }

  .app-body .app-subnav > a[aria-current="page"],
  .app-body .app-subnav > button.active {
    background: var(--color-brand-soft);
    border-color: var(--color-brand-soft);
    color: var(--color-brand-text);
  }

  .app-subnav__note {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
  }

  .app-subnav__note .top-note {
    padding: 2px var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
  }

  .app-subnav .bubble {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-text-on-brand);
    font-size: var(--text-xs);
    line-height: 20px;
    text-align: center;
  }

  /* ---- 4. 面板与表单（旧页的原生 label/input/button 结构） ---- */
  .app-body .panel,
  .app-body .success,
  .app-body > form,
  .app-body .request-document,
  .app-body .received,
  .app-body .request-index {
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  .app-body .panel form,
  .app-body .panel .panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-body .panel .panel {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-divider);
  }

  .app-body .success {
    border-top: 4px solid var(--success-solid);
  }

  .app-body h2 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    margin-bottom: var(--space-3);
  }

  .app-body h3 {
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    margin-bottom: var(--space-2);
  }

  .app-body p {
    margin-bottom: var(--space-4);
  }

  .app-body p:last-child {
    margin-bottom: 0;
  }

  .app-body .help,
  .app-body .hint,
  .app-body small,
  .app-body .privacy,
  .app-body .warning {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
  }

  .app-body .warning {
    color: var(--warning-text);
  }

  .app-body label:not(.choices label, .consent, .check-row, .services label, fieldset label) {
    display: block;
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-label);
    color: var(--color-text);
  }

  .app-body label > span:first-child {
    display: block;
    margin-bottom: 6px;
  }

  .app-body label > small {
    margin-top: 6px;
  }

  .app-body textarea {
    min-height: 120px;
    padding-block: var(--space-2);
  }

  .app-body fieldset {
    min-inline-size: 0;
    margin-bottom: var(--space-5);
  }

  .app-body legend {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-label);
  }

  .app-body .choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-2) var(--space-4);
  }

  .app-body .choices label,
  .app-body .consent,
  .app-body .services label,
  .app-body fieldset > label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    margin: 0;
    padding: var(--space-2) 0;
    font-size: 1rem;
    font-weight: var(--weight-regular);
    line-height: 1.45;
    cursor: pointer;
  }

  .app-body .choices input,
  .app-body .consent input,
  .app-body .services input,
  .app-body fieldset > label input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
  }

  .app-body .choices span,
  .app-body .consent span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .app-body .consent {
    margin-block: var(--space-4);
  }

  .app-body .pair,
  .app-body .quote-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 var(--space-4);
  }

  .app-body details {
    margin-bottom: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
  }

  .app-body summary {
    margin-bottom: var(--space-4);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .app-body .form-section {
    margin-block: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
  }

  .app-body .form-section > h2 {
    margin-bottom: var(--space-1);
  }

  .app-body #services-group[aria-invalid="true"] {
    padding-left: var(--space-3);
    border-left: 3px solid var(--danger-solid);
  }

  .app-body .field-error {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--danger-text);
  }

  .app-body #captcha {
    margin-block: var(--space-4);
    max-width: 100%;
  }

  .app-body .trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* 按钮：原生 button = 主按钮；.secondary = 次按钮；a.button = 主按钮链接 */
  .app-body:not(.app-body--tools) button,
  .app-body .button,
  .app-body .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-text-on-brand);
    font-size: var(--text-btn);
    font-weight: var(--weight-btn);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  }

  .app-body:not(.app-body--tools) button:hover,
  .app-body .button:hover,
  .app-body .primary:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-text-on-brand);
    text-decoration: none;
  }

  .app-body .secondary,
  .app-body button.secondary,
  .app-body a.secondary {
    background: var(--color-surface);
    border-color: var(--border-strong);
    color: var(--color-brand-text);
  }

  .app-body .secondary:hover {
    background: var(--gray-50);
    border-color: var(--color-brand);
    color: var(--color-brand-text);
  }

  .app-body button.danger,
  .app-body .danger {
    color: var(--danger-text);
    border-color: var(--danger-border);
  }

  .app-body button:disabled,
  .app-body .button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .app-body .text-action,
  .app-body .link-btn {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    text-decoration: underline;
  }

  .app-body .actions,
  .app-body .row,
  .app-body .admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-4) 0;
  }

  .app-body .admin-toolbar p {
    margin: 0;
  }

  .app-body .admin-toolbar select {
    width: auto;
    max-width: 260px;
  }

  .app-body .filter-label {
    display: block;
    max-width: 320px;
  }

  .app-body .message {
    min-height: 1.5em;
    margin-block: var(--space-2) 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--text-sm);
    color: var(--success-text);
  }

  .app-body .message.error,
  .app-body .error {
    color: var(--danger-text);
  }

  .app-body .status {
    display: block;
    min-height: 1.5em;
    margin-top: var(--space-3);
    overflow-wrap: anywhere;
    color: var(--color-brand-text);
  }

  .app-body .status.error-text {
    color: var(--danger-text);
  }

  .app-body .reference {
    font-size: var(--text-h3);
    font-weight: var(--weight-heading);
    overflow-wrap: anywhere;
  }

  .app-body .status-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .app-body .verified-badge {
    color: var(--success-text);
    font-weight: var(--weight-semibold);
  }

  .app-body .featured-badge {
    color: var(--warning-text);
    font-weight: var(--weight-semibold);
  }

  .app-body blockquote {
    margin-block: var(--space-4);
    padding: 0 var(--space-4);
    border-left: 3px solid var(--border-default);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--color-text-secondary);
  }

  .app-body .notice {
    display: block;
    margin-bottom: var(--space-2);
  }

  /* 记录行（我的需求、审核列表、服务商列表） */
  .app-body .record {
    width: 100%;
    margin-block: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    overflow-wrap: anywhere;
  }

  .app-body .record strong,
  .app-body .record small {
    display: block;
  }

  .app-body .record small {
    margin: var(--space-1) 0 var(--space-3);
  }

  .app-body .record.selected {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
  }

  .app-body .record button {
    margin: var(--space-1) var(--space-2) 0 0;
    min-height: 36px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }

  .app-body .record .secondary {
    margin-right: var(--space-2);
  }

  .app-body dl {
    margin-bottom: var(--space-5);
  }

  .app-body dt {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
  }

  .app-body dd {
    margin: var(--space-1) 0 var(--space-4);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .app-body #member-workspace > section {
    margin-top: var(--space-8);
  }

  .app-body .review-queues {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .app-body .review-queues > * {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 56px;
    padding-block: var(--space-2);
  }

  .app-body .queue-link {
    display: inline-flex;
    padding-inline: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-brand-text);
    font-size: var(--text-btn);
    font-weight: var(--weight-btn);
    text-decoration: none;
  }

  .app-body .review-queues strong {
    font-size: var(--text-h4);
  }

  .app-body .review-grid,
  .app-body .workspace {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .app-body .review-grid > *,
  .app-body .workspace > * {
    min-width: 0;
  }

  .app-body #login {
    max-width: 600px;
  }

  .app-body .ed-supplier-filter {
    max-width: 320px;
  }

  .app-body .ed-supplier-filter label {
    margin-bottom: 6px;
  }

  /* 需求工作台 */
  .app-body .request-index {
    background: var(--gray-50);
  }

  .app-body .request-index h2 {
    font-size: var(--text-h4);
  }

  .app-body .document-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-text);
  }

  .app-body .document-title span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .app-body .preview {
    margin-block: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    overflow-wrap: anywhere;
  }

  .app-body .preview dl {
    margin: 0;
  }

  .app-body .preview dl > div {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .app-body .preview dd {
    margin: 0;
  }

  .app-body .sharing {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-divider);
  }

  .app-body .request-document fieldset,
  .app-body .received fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 var(--space-4);
  }

  .app-body .request-document fieldset legend,
  .app-body .received fieldset legend {
    grid-column: 1 / -1;
  }

  .app-body .quote-offer {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-divider);
  }

  .app-body .quote-offer h4 {
    margin: 0;
  }

  .app-body .quote-price {
    margin: var(--space-2) 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-heading);
  }

  .app-body .quote-offer p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .app-body .quote-reasons {
    color: var(--warning-text);
  }

  .app-body #quote-editor {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
  }

  /* 账户页 */
  .app-body .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--space-5);
  }

  .app-body label.field {
    display: block;
  }

  .app-body .services {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    margin-bottom: var(--space-3);
  }

  .app-body hr {
    margin-block: var(--space-6);
    border-top: 1px solid var(--color-divider);
  }

  .app-body #supplier-guide li {
    margin-block: var(--space-2);
  }

  .app-body #supplier-guide ol {
    padding-inline-start: 1.25em;
  }

  /* 参展规划工具：提示条、品牌小字 */
  .app-body .toast {
    position: fixed;
    inset-inline: 0;
    bottom: var(--space-6);
    width: fit-content;
    max-width: calc(100% - 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--gray-900);
    color: var(--color-text-on-dark);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    z-index: 50;
  }

  @media (max-width: 767.98px) {
    .app-body .review-grid,
    .app-body .workspace {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-body .panel,
    .app-body .success,
    .app-body > form,
    .app-body .request-document,
    .app-body .received,
    .app-body .request-index {
      padding: var(--space-5) var(--space-4);
    }

    .app-body .preview dl > div {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-1);
    }

    .app-body .actions button,
    .app-body .actions .button {
      width: 100%;
    }

    .app-body .document-title {
      flex-direction: column;
      gap: var(--space-1);
    }
  }
}