/* 嵌入模式（在 market.yaochn.com 的 /brand-guide/<tab> 里）：
       横幅与标签条由 dashboard 画在 iframe 上方，iframe 不滚动、高度随内容，所以这里不画自带页头、不留顶部空白；
       「On This Page」侧栏改成相对内容定位，由 brand-guide.js 根据外层滚动位置把它保持在视口里。 */
    html.embedded body { padding-top: 0; }
    html.embedded .page-header { display: none; }
    html.embedded .app-layout { position: relative; min-height: 0; }
    html.embedded .sidebar { position: absolute; top: 0; height: auto; border-radius: 12px; }
    html.embedded #bg-tabbar { display: none; }

    /* ─── Reset & Base ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000000;
      background: #F5F7FA;
      line-height: 1.6;
      padding-top: 180px;
    }

    /* ─── Header (sticky, full width) ─── */
    .page-header {
      background: linear-gradient(80deg, #004D93 12.22%, #00ECC4 80.88%);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 300;
      padding: 20px 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 180px;
    }
    .page-header-text { text-align: center; }
    .page-header-text .company {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .page-header-text h1 {
      font-size: 26px;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.2;
    }
    .page-header-text p {
      color: rgba(255,255,255,0.65);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* ─── App Layout (below header) ─── */
    .app-layout { display: flex; min-height: calc(100vh - 180px); }

    /* ─── Sidebar ─── */
    .sidebar {
      width: 250px;
      min-width: 250px;
      background: #F5F7FA;
      color: #000000;
      position: fixed;
      top: 180px;
      left: 0;
      height: calc(100vh - 180px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      z-index: 200;
      border-right: 1px solid #E8ECF0;
    }
    .sidebar-brand {
      padding: 28px 24px 20px;
      border-bottom: 1px solid #E8ECF0;
    }
    .sidebar-brand h2 {
      font-size: 17px;
      font-weight: 700;
      color: #000000;
      line-height: 1.2;
    }
    .sidebar-brand p {
      font-size: 11px;
      font-weight: 500;
      color: #44566B;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 4px;
    }
    .sidebar-nav {
      padding: 20px 0 12px;
      flex: 1;
    }
    .sidebar-nav .nav-group {
      padding: 8px 24px 4px;
      font-size: 10px;
      font-weight: 700;
      color: #44566B;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .sidebar-nav a {
      display: block;
      padding: 9px 24px;
      font-size: 13px;
      font-weight: 500;
      color: #44566B;
      text-decoration: none;
      transition: all 0.15s;
      border-left: 3px solid transparent;
    }
    .sidebar-nav a:hover {
      color: #000000;
      background: rgba(0,0,0,0.03);
      border-left-color: #00BB9B;
    }
    .sidebar-nav a.active {
      color: #000000;
      background: rgba(0,187,155,0.06);
      border-left-color: #00BB9B;
    }

    /* ─── Main Area ─── */
    .main-area {
      margin-left: 250px;
      flex: 1;
      min-width: 0;
    }

    /* ─── Content ─── */
    .content { max-width: 1024px; margin: 0 auto; padding: 36px 40px; }

    /* ─── Sections ─── */
    .section { margin-bottom: 48px; }
    .section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #00BB9B;
      margin-bottom: 8px;
    }
    .section-title {
      font-size: 26px;
      font-weight: 700;
      color: #000000;
      margin-bottom: 6px;
    }
    .section-desc {
      font-size: 14px;
      color: #44566B;
      margin-bottom: 20px;
      max-width: 640px;
    }
    .section-divider {
      border: none;
      border-top: 1px solid #E8ECF0;
      margin-bottom: 48px;
    }
    .subsection-label {
      font-size: 12px;
      font-weight: 600;
      color: #44566B;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      margin-top: 24px;
    }

    /* ─── Logo ─── */
    .logo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .logo-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }
    .logo-card {
      border-radius: 12px;
      padding: 28px 28px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .logo-card.light    { background: #FFFFFF; border: 1px solid #E8ECF0; }
    .logo-card.offwhite { background: #F5F7FA; border: 1px solid #E8ECF0; }
    .logo-card.dark     { background: #053587; }
    .logo-card.teal     { background: #00BB9B; }
    .logo-card img      { height: 44px; max-width: 100%; object-fit: contain; }
    .logo-card-label    { font-size: 12px; font-weight: 500; color: #44566B; text-transform: uppercase; letter-spacing: 0.08em; }
    .logo-card.dark  .logo-card-label { color: rgba(255,255,255,0.4); }
    .logo-card.teal  .logo-card-label { color: rgba(255,255,255,0.6); }

    /* 二维码卡片：沿用 logo-card 的白卡样式，只把图片改成正方形并加上网址行 */
    .qr-card img        { width: 132px; height: 132px; }
    .qr-card-use        { font-size: 13px; color: #000000; line-height: 1.5; }
    .qr-card-url        { font-size: 13px; color: #298C7C; font-weight: 600; text-decoration: none; word-break: break-all; }

    /* 活动模板卡片：预览图统一放进固定高度的框里，横版竖版都不会撑乱网格 */
    .tpl-card img       { width: 100%; height: 170px; object-fit: contain; }
    .tpl-card-size      { font-size: 13px; color: #44566B; margin-top: -8px; }
    .tpl-card-note      { font-size: 13px; color: #298C7C; font-weight: 600; }

    /* 下载按钮:浅色卡片用描边胶囊,深色卡片改用半透明白色,保证两种底色都可读 */
    .dl-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .dl-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 7px 14px;
      border-radius: 30px;
      text-decoration: none;
      border: 1px solid #C9D1DB;
      color: #000000;
      background: #FFFFFF;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .dl-btn:hover {
      background: #00BB9B;
      border-color: #00BB9B;
      color: #FFFFFF;
    }
    .logo-card.dark .dl-btn,
    .icon-card.dark .dl-btn {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.85);
    }
    .logo-card.dark .dl-btn:hover,
    .icon-card.dark .dl-btn:hover {
      background: #00BB9B;
      border-color: #00BB9B;
      color: #FFFFFF;
    }

    .icon-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .icon-card {
      border-radius: 12px;
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .icon-card.light    { background: #FFFFFF; border: 1px solid #E8ECF0; }
    .icon-card.offwhite { background: #F5F7FA; border: 1px solid #E8ECF0; }
    .icon-card.dark     { background: #053587; }
    .icon-card.teal     { background: #00BB9B; }
    .icon-card img      { height: 56px; width: 56px; object-fit: contain; }
    .icon-card-label    { font-size: 12px; font-weight: 500; color: #44566B; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }
    .icon-card.dark  .icon-card-label { color: rgba(255,255,255,0.4); }
    .icon-card.teal  .icon-card-label { color: rgba(255,255,255,0.6); }

    /* ─── Product Logos ─── */
    .product-block { margin-bottom: 20px; }
    .product-block-header {
      font-size: 13px;
      font-weight: 700;
      color: #000000;
      margin-bottom: 12px;
      padding-left: 2px;
    }
    .product-logo-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .product-logo-card {
      border-radius: 12px;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    .product-logo-card.light { background: #FFFFFF; border: 1px solid #E8ECF0; }
    .product-logo-card.dark  { background: #053587; }
    .product-logo-card img   { height: 32px; max-width: 100%; object-fit: contain; }
    .product-logo-card-label { font-size: 12px; font-weight: 500; color: #44566B; text-transform: uppercase; letter-spacing: 0.08em; }
    .product-logo-card.dark .product-logo-card-label { color: rgba(255,255,255,0.4); }

    /* ─── Colors ─── */
    .color-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
      gap: 10px;
    }
    .color-card { border-radius: 10px; overflow: hidden; border: 1px solid #E8ECF0; background: #FFFFFF; }
    .color-swatch { height: 44px; }
    .color-info { padding: 8px 10px; background: #FFFFFF; }
    .color-name { font-size: 13px; font-weight: 600; color: #000000; }
    .color-hex  { font-size: 12px; color: #44566B; font-family: 'Courier New', monospace; margin-top: 2px; }
    .color-use  { font-size: 11px; color: #44566B; margin-top: 2px; line-height: 1.4; }
    /* 印刷用 Pantone 色号（2026-10-30 起） */
    .color-pms  { font-size: 11px; font-weight: 700; color: #298C7C; margin-top: 2px; letter-spacing: 0.02em; }

    /* ─── Typography ─── */
    .type-stack { display: flex; flex-direction: column; gap: 16px; }
    .type-row {
      display: grid;
      grid-template-columns: 200px 1fr;
      align-items: baseline;
      gap: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #E8ECF0;
    }
    .type-row:last-child { border-bottom: none; }
    .type-meta .type-label { font-size: 12px; font-weight: 600; color: #44566B; text-transform: uppercase; letter-spacing: 0.08em; }
    .type-meta .type-spec  { font-size: 12px; color: #44566B; margin-top: 4px; font-family: 'Courier New', monospace; }
    .type-example.h1      { font-size: 50px; font-weight: 700; color: #000000; line-height: 1.1; }
    .type-example.h2      { font-size: 32px; font-weight: 700; color: #000000; line-height: 1.2; }
    .type-example.h3      { font-size: 24px; font-weight: 700; color: #000000; line-height: 1.3; }
    .type-example.h4      { font-size: 18px; font-weight: 600; color: #000000; }
    .type-example.body-lg { font-size: 16px; font-weight: 400; color: #44566B; }
    .type-example.body-sm { font-size: 14px; font-weight: 400; color: #44566B; }
    .type-example.label   { font-size: 11px; font-weight: 700; color: #00BB9B; text-transform: uppercase; letter-spacing: 0.1em; }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 30px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.2s;
      text-decoration: none;
    }
    .btn-primary   { background: #00BB9B; color: #FFFFFF; }
    .btn-primary:hover { background: #00A589; }
    .btn-secondary { background: transparent; color: #00BB9B; border: 2px solid #00BB9B; }
    .btn-secondary:hover { background: #F0FDF9; }
    .btn-dark      { background: #053587; color: #FFFFFF; }
    .btn-dark:hover { background: #11202C; }
    .btn-ghost     { background: transparent; color: #44566B; border: 1px solid #E8ECF0; }
    .btn-ghost:hover { background: #F5F7FA; color: #000000; }
    .btn-sm { padding: 8px 20px; font-size: 13px; }
    .btn-lg { padding: 16px 36px; font-size: 16px; }

    .button-label-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 20px;
    }
    .btn-labeled { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .btn-spec-tag { font-size: 11px; color: #44566B; font-family: 'Courier New', monospace; }

    /* ─── Spacing ─── */
    .spacing-grid { display: flex; flex-direction: column; gap: 12px; }
    .spacing-row { display: flex; align-items: center; gap: 20px; }
    .spacing-bar { background: #00BB9B; height: 8px; border-radius: 4px; }
    .spacing-info { font-size: 13px; }
    .spacing-token { font-weight: 600; color: #000000; font-family: 'Courier New', monospace; }
    .spacing-value { color: #44566B; margin-left: 8px; }

    /* ─── Components ─── */
    .component-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .card {
      background: #FFFFFF;
      border: 1px solid #E8ECF0;
      border-radius: 12px;
      padding: 20px;
    }
    .card-badge {
      display: inline-block;
      background: #F0FDF9;
      color: #00BB9B;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 14px;
    }
    .card-title { font-size: 16px; font-weight: 700; color: #000000; margin-bottom: 8px; }
    .card-body  { font-size: 14px; color: #44566B; line-height: 1.6; }
    .card-footer { margin-top: 20px; }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      gap: 6px;
    }
    .tag-primary { background: #F0FDF9; color: #00BB9B; }
    .tag-dark    { background: #E8ECF0; color: #000000; }
    .tag-success { background: #ECFDF5; color: #059669; }
    .tag-warning { background: #FFFBEB; color: #D97706; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

    /* ─── Icon Dots ─── */
    .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

    /* ─── Border Radius Demo ─── */
    .border-radius-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
    .radius-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .radius-box { width: 72px; height: 72px; background: #053587; }
    .radius-label { font-size: 12px; color: #44566B; font-family: 'Courier New', monospace; text-align: center; }

    /* ─── Brand Voice ─── */
    .voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .voice-card {
      border-radius: 12px;
      padding: 24px;
      background: #FFFFFF;
      border: 1px solid #E8ECF0;
    }
    .voice-card h4 { font-size: 14px; font-weight: 700; color: #000000; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
    .voice-card ul { padding-left: 18px; }
    .voice-card li { font-size: 13px; color: #44566B; line-height: 1.7; }
    .voice-do   h4::before { content: '✓'; color: #00BB9B; }
    .voice-dont h4::before { content: '✕'; color: #F87171; }

    /* 色板 / 字体节里的小标题（2026-10-15 v2.1 新增） */
    .sub-title { font-size: 18px; font-weight: 600; color: #000000; margin: 24px 0 10px; }


    /* 2026-10-15 v2.3 重组：大分组标题、快速下载、速查卡片（类名用 qref-，避免和二维码卡片 qr-card 撞名） */
    .sidebar-nav .nav-group { padding-top: 16px; }
    .sidebar-nav .nav-group:first-child { padding-top: 8px; }
    .nav-soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #298C7C; background: #F0FDF9; border-radius: 30px; padding: 1px 7px; margin-left: 4px; }
    .part-title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #298C7C; margin: 8px 0 20px; padding-bottom: 8px; border-bottom: 2px solid #00BB9B; }
    .quick-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .quick-dl-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #FFFFFF; border: 1px solid #E8ECF0; border-radius: 12px; text-decoration: none; color: #000000; transition: border-color 0.15s ease, background 0.15s ease; }
    .quick-dl-item strong { font-size: 14px; }
    .quick-dl-item span { font-size: 12px; color: #298C7C; }
    .quick-dl-item:hover { border-color: #00BB9B; background: #F0FDF9; }
    .qref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .qref-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: #FFFFFF; border: 1px solid #E8ECF0; border-radius: 12px; text-decoration: none; color: #000000; transition: border-color 0.15s ease; }
    .qref-card:hover { border-color: #00BB9B; }
    .qref-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #298C7C; }
    .qref-big { font-size: 20px; font-weight: 700; }
    .qref-text { font-size: 13px; line-height: 1.55; }
    .qref-text code { font-family: 'Courier New', monospace; font-size: 12px; }
    .qref-dots { display: flex; gap: 6px; }
    .qref-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
    @media (max-width: 900px) { .quick-dl, .qref-grid { grid-template-columns: 1fr 1fr; } }

    /* Stock Photos：三列卡片，整卡链到 SharePoint 图库；预览图只是 480px 小图，原图不放在本站 */
    .stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .stock-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #FFFFFF; border: 1px solid #E8ECF0; border-radius: 12px; text-decoration: none; color: #000000; transition: border-color 0.15s ease; }
    .stock-card:hover { border-color: #00BB9B; }
    .stock-thumb { display: flex; align-items: center; justify-content: center; height: 170px; margin-bottom: 6px; background: #F5F7FA; border-radius: 8px; overflow: hidden; }
    .stock-thumb img { max-width: 100%; max-height: 170px; object-fit: contain; }
    .stock-title { font-size: 14px; font-weight: 600; }
    .stock-meta { font-size: 13px; color: #298C7C; }
    .stock-note { font-size: 13px; color: #298C7C; font-weight: 600; margin-top: 4px; }
    @media (max-width: 900px) { .stock-grid { grid-template-columns: 1fr 1fr; } }

    /* Stock Photos 灯箱：独立打开时铺满窗口；嵌入 dashboard 时 iframe 不滚动，由 brand-guide.js 按外层可视区设 top/height */
    .lb { position: fixed; inset: 0; z-index: 1000; }
    html.embedded .lb { position: absolute; left: 0; right: 0; bottom: auto; }
    .lb[hidden] { display: none; }
    .lb-backdrop { position: absolute; inset: 0; background: rgba(17, 32, 44, 0.78); }
    .lb-panel { position: absolute; inset: 24px; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: #FFFFFF; border-radius: 12px; overflow: hidden; }
    .lb-media { position: relative; display: flex; align-items: center; justify-content: center; background: #F5F7FA; min-height: 0; padding: 16px 56px; }
    .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid #C9D1DB; border-radius: 50%; background: #FFFFFF; font-size: 24px; line-height: 1; color: #000000; cursor: pointer; }
    .lb-nav:disabled { opacity: 0.35; cursor: default; }
    .lb-prev { left: 10px; }
    .lb-next { right: 10px; }
    .lb-close { position: absolute; top: 10px; right: 12px; z-index: 1; width: 36px; height: 36px; border: none; border-radius: 50%; background: #F5F7FA; font-size: 24px; line-height: 1; cursor: pointer; }
    .lb-close:hover, .lb-nav:not(:disabled):hover { background: #F0FDF9; }
    .lb-info { display: flex; flex-direction: column; gap: 10px; padding: 56px 24px 24px; overflow-y: auto; }
    .lb-title { font-size: 18px; font-weight: 700; color: #000000; }
    .lb-meta { font-size: 13px; color: #298C7C; }
    .lb-note { font-size: 13px; color: #298C7C; font-weight: 600; }
    .lb-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
    .lb-btn { display: block; text-align: center; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid #00BB9B; color: #298C7C; background: #FFFFFF; }
    .lb-btn:hover { background: #F0FDF9; }
    .lb-primary { background: #00BB9B; color: #FFFFFF; }
    .lb-primary:hover { background: #298C7C; }
    .lb-hint { font-size: 12px; color: #298C7C; }
    .lb :focus-visible { outline: 2px solid #053587; outline-offset: 2px; }
    @media (max-width: 800px) {
      .lb-panel { inset: 12px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
      .lb-info { padding: 16px; }
    }

    /* ─── Footer ─── */
    .page-footer {
      background: #053587;
      text-align: center;
      padding: 24px 48px;
      color: rgba(255,255,255,0.5);
      font-size: 12px;
    }
    .page-footer strong { color: #FFFFFF; }

    /* 2026-10-15 拆成标签页：顶部标签条 + 侧栏顶部的标签列表（由 brand-guide.js 生成） */
    /* 独立打开时（branding-guide 仓库）的横向标签条：与 dashboard 会议分析页同一风格——深蓝选中字 + 品牌绿下划线；
       嵌入 dashboard 时隐藏，由 dashboard 的标签条代替 */
    .bg-tabbar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #E8ECF0; margin-bottom: 20px; }
    .bg-tabbar a { padding: 10px 16px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: #44566B; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
    .bg-tabbar a:hover { background: #E8ECF0; }
    .bg-tabbar a.active { color: #053587; border-bottom-color: #00BB9B; }
    .tab-intro { font-size: 14px; color: #298C7C; margin: -8px 0 28px; }
    .page-footer a { color: #FFFFFF; }