/* Beginner guide family: shared shell, editorial content and usable diagrams. */
.bg-hub,.bg-article { background:#f7f9fc; color:#344052; font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
.bg-container { width:var(--pc-content-width); max-width:var(--pc-content-max); margin:0 auto; padding:0 0 40px; }
.bg-hub .pc-breadcrumb { min-height:48px; }
.bg-hero { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:50px; padding:36px 48px; border:1px solid #e0eafa; border-radius:10px; background:linear-gradient(115deg,#edf5ff 0%,#f5f8ff 55%,#fff7ee 100%); }
.bg-eyebrow { color:#5d84b3; font-size:12px; letter-spacing:1.5px; }
.bg-hero h1 { margin:15px 0; color:#263d5c; font-size:36px; font-weight:700; line-height:1.45; }
.bg-hero h1 + p { color:#718298; font-size:15px; line-height:1.9; }
.bg-button { display:inline-flex; gap:24px; align-items:center; justify-content:center; background:#286fd7; color:#fff; border-radius:5px; padding:12px 20px; font-size:14px; }
.bg-button:hover { background:#1f5ebc; color:#fff; }
.bg-hero .bg-button { margin-top:24px; }
.bg-hero__map { display:grid; justify-items:stretch; padding:0 18px; }
.bg-hero__map > span { padding:17px 22px; display:flex; align-items:center; gap:16px; background:rgb(255 255 255 / 90%); border:1px solid #e3eaf3; border-radius:7px; font:20px Arial,sans-serif; color:#9ab7df; }
.bg-hero__map strong { color:#3c5574; font:600 17px "Microsoft YaHei",sans-serif; }
.bg-hero__map small { margin-left:auto; color:#94a0ae; font:12px "Microsoft YaHei",sans-serif; }
.bg-hero__map i { padding:5px; color:#b9cce5; text-align:center; font-style:normal; }
.bg-hub__section { margin-top:30px; }
.bg-section-title { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.bg-section-title > span { color:#be8c59; font:24px Arial,sans-serif; }
.bg-section-title h2 { color:#33455f; font-size:22px; font-weight:700; }
.bg-section-title p { margin-left:auto; color:#909bab; font-size:13px; }
.bg-guide-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.bg-guide-grid > a { display:block; position:relative; padding:24px; border:1px solid #e4eaf2; border-radius:7px; background:#fff; transition:border-color .18s,box-shadow .18s; }
.bg-guide-grid > a:hover { border-color:#b6cdeb; box-shadow:0 7px 20px rgb(50 85 132 / 6%); }
.bg-guide-grid .icon { width:28px; height:28px; color:#6b99d7; margin-bottom:15px; }
.bg-guide-grid h3 { font-size:19px; font-weight:700; color:#344b6b; }
.bg-guide-grid p { margin-top:9px; color:#8490a2; font-size:13px; line-height:1.8; min-height:46px; }
.bg-guide-grid a > span { display:block; margin-top:15px; color:#ad814f; font-size:12px; }
.bg-hub__help { margin-top:32px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 32px; border:1px solid #eddfce; border-radius:7px; background:#fff8ef; }
.bg-hub__help h2 { color:#795431; font-size:22px; font-weight:700; }
.bg-hub__help p { margin-top:7px; color:#a08b72; font-size:13px; }
.bg-hub__help .bg-button { background:#b67b43; }
.bg-navigation { border:1px solid #e4eaf2; border-radius:7px; background:#fff; overflow:hidden; }
.bg-navigation__head { display:flex; justify-content:space-between; align-items:center; padding:15px 18px; background:#fff4e6; border-bottom:1px solid #f0e1ce; }
.bg-navigation__head h2 { font-size:17px; color:#79502d; font-weight:700; }
.bg-navigation__head > a { font-size:11px; color:#a08870; }
.bg-navigation nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:13px; }
.bg-navigation nav a { display:flex; align-items:center; gap:7px; padding:9px 7px; color:#6a7b91; font-size:13px; border-radius:4px; }
.bg-navigation .icon { width:17px; height:17px; color:#6e9add; flex:none; }
.bg-navigation a[aria-current],.bg-navigation nav a:hover { background:#edf4ff; color:#2b6dcc; }
.bg-article__intro { margin:18px 0 0; color:#758398; font-size:15px; line-height:1.9; }
.bg-inline-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
.bg-inline-actions a { padding:8px 12px; background:#f1f6fe; border-radius:4px; color:#4677bb; font-size:12px; }
.bg-article .article-heading__category > span:first-child { background:#fff2df; color:#a46d35; }
.bg-article .article-summary { background:#f6f9fe; }
.bg-article .article-summary summary { color:#526e95; }
.bg-article .article-summary[open] p { margin-top:8px; }
.bg-article .article-body .pc-richtext h2 { margin-top:32px; }
.bg-article .bg-steps { counter-reset:guide-step; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bg-article .bg-steps > li { counter-increment:guide-step; position:relative; margin:0!important; padding:18px 17px 18px 49px; border:1px solid #e2eaf4; border-radius:6px; background:#f7faff; font-size:14px; line-height:1.8; }
.bg-article .bg-steps > li::before { content:counter(guide-step,decimal-leading-zero); position:absolute; left:15px; top:19px; color:#82a8d9; font:bold 17px Arial,sans-serif; }
.bg-article .bg-steps strong { display:block; color:#3e5d87; font-size:16px; margin-bottom:6px; }
.bg-article .bg-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; list-style:none; }
.bg-article .bg-facts li { margin:0!important; padding:18px; border:1px solid #eee2d2; border-radius:6px; background:#fffbf5; font-size:14px; line-height:1.8; }
.bg-article .bg-facts strong { display:block; margin-bottom:8px; color:#976738; font-size:16px; }
.bg-article .bg-checklist { list-style:none; padding:0; }
.bg-article .bg-checklist li { position:relative; padding:12px 16px 12px 39px; margin-top:8px; background:#f6f9fc; border-radius:4px; font-size:15px; }
.bg-article .bg-checklist li::before { content:'✓'; position:absolute; left:15px; color:#6993cc; }
.bg-article .bg-note { padding:14px 18px; background:#fff8ed; border:1px solid #f0e0c9; border-radius:5px; color:#8b704f; font-size:14px; }
.bg-article .bg-reference-table { font-size:13px; }
.bg-article .bg-reference-table td:first-child { min-width:66px; font-weight:600; color:#466487; }
.bg-article .bg-reference-table td:last-child { min-width:112px; width:112px; }
.bg-article .bg-reference-table td:last-child a { white-space:nowrap; }
.bg-article--supported .bg-reference-table td:first-child { min-width:124px; width:124px; }
.bg-article .bg-reference-table p { margin:0 0 6px; font-size:13px; }
.bg-table-search { display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid #e1e8f2; border-radius:6px; background:#f7faff; font-size:13px; }
.bg-table-search label { color:#557294; font-weight:600; white-space:nowrap; }
.bg-table-search input { min-width:0; flex:1; max-width:330px; padding:9px 12px; border:1px solid #d6e1ef; border-radius:4px; background:#fff; font:inherit; color:#364c68; }
.bg-table-search input:focus { outline:2px solid #9cbce8; outline-offset:1px; }
.bg-table-search [role=status] { margin-left:auto; color:#8c9bad; white-space:nowrap; }
.bg-table-search button { font:inherit; color:#537eb6; cursor:pointer; }
.bg-table-search button:disabled { color:#b0bac6; cursor:default; }
.bg-article .bg-table-empty { padding:18px; text-align:center; color:#8390a4; font-size:14px; background:#f8fafc; }
.bg-article .bg-reference-table tr[hidden],.bg-article .bg-table-empty[hidden] { display:none; }
.bg-article .bg-sample-caption { text-align:center; font-size:12px; color:#98a0ab; }
.bg-article .pc-richtext .bg-certificate { border:1px solid #d5c2a9; background:#fffcf7; }
.bg-article .pc-richtext .bg-certificate td { width:50%; padding:24px; border:1px solid #e9dece; background:transparent; }
.bg-article .pc-richtext .bg-certificate tr:first-child td { background:#f6eddf; text-align:center; padding:24px; }
.bg-article .bg-certificate strong { color:#8c663c; font-size:17px; }
.bg-article .bg-certificate tr:first-child strong { font-size:24px; letter-spacing:2px; }
.bg-article .bg-certificate p { margin:8px 0 0; color:#9e8d78; font-size:13px; }
.bg-article .bg-sources { font-size:13px; line-height:1.8; color:#7c8b9e; }
.bg-article .bg-sources li { margin:7px 0; }
.bg-article .article-body .pc-richtext .bg-sample { max-height:480px; width:auto; max-width:100%; object-fit:contain; padding:12px; border:1px solid #e7ebf1; background:#fafbfd; }
.bg-hub a:focus-visible,.bg-navigation a:focus-visible { outline:2px solid #bb8245; outline-offset:3px; }
.bg-plan-directory { background:#f7f9fc; color:#42516a; font-family:"Microsoft YaHei","PingFang SC",sans-serif; --pc-section-gap:20px; }
.bg-plan-directory .pc-page-hero { padding:26px 30px; border:1px solid #e0e8f4; border-radius:8px; background:linear-gradient(110deg,#eef5ff,#fff9f1); }
.bg-plan-directory .pc-page-hero__inner { padding:0; }
.bg-plan-directory .pc-page-hero__eyebrow { color:#6e8cae; font-size:12px; letter-spacing:1px; }
.bg-plan-directory .pc-page-hero__title { margin-top:9px; font-size:28px; color:#2f4666; }
.bg-plan-directory .pc-page-hero__summary { color:#7c8b9f; font-size:14px; line-height:1.9; margin-top:10px; }
.bg-plan-directory .pc-page-hero__meta { margin-top:15px; }
.bg-plan-directory .pc-filter-bar { padding:20px; border:1px solid #e4eaf2; border-radius:7px; }
.bg-plan-directory .pc-form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.bg-plan-directory .pc-field { font-size:13px; font-weight:500; color:#6f819a; }
.bg-plan-directory .pc-control { min-height:40px; font-size:13px; color:#4b607c; border-color:#dee6f1; border-radius:4px; }
.bg-plan-directory .pc-button { min-height:38px; font-size:13px; border-radius:4px; }
.bg-plan-directory .pc-button--primary { background:#2d70ce; border-color:#2d70ce; }
.bg-plan-directory .pc-two-column { grid-template-columns:minmax(0,1fr) 288px; gap:24px; }
.bg-plan-directory .pc-section-heading__title { color:#435975; font-size:20px; }
.bg-plan-directory .pc-section-heading__summary { color:#8897aa; font-size:13px; }
.bg-plan-directory .pc-entity-card { border:1px solid #e2e9f3; border-radius:7px; padding:21px; }
.bg-plan-directory .pc-entity-card__title { color:#37547d; font-size:19px; }
.bg-plan-directory .pc-entity-card__summary { color:#7c8da2; font-size:13px; line-height:1.8; }
.bg-plan-directory .pc-entity-card__logo { background:#eef5ff; color:#6893ca; border-color:#dde9f7; }
.bg-plan-directory .pc-entity-card__fact strong { color:#496784; }
.bg-plan-directory .pc-entity-card__footer { border-color:#e8edf5; }
@media(max-width:1100px) { .bg-hero { padding:28px; gap:24px; } .bg-hero__map { padding:0; } .bg-hero__map small { display:none; } .bg-guide-grid > a { padding:18px; } .bg-article .bg-facts { grid-template-columns:1fr; } }