/* Shared prototype components. Existing content, palettes, URLs and events are retained. */
.components-polished {
  --ui-accent: #b84100;
  --ui-accent-hover: #923400;
  --ui-accent-soft: #fff3eb;
  --ui-line: #e5e7ec;
  --ui-ink: #202735;
  --ui-muted: #626b7a;
  --ui-shadow: 0 3px 14px rgb(26 32 44 / 4%);
  --ui-shadow-raised: 0 12px 28px rgb(26 32 44 / 8%);
}
.components-polished .site-header { background: rgb(255 255 255 / 97%); border-bottom: 1px solid var(--ui-line); box-shadow: 0 2px 12px rgb(26 32 44 / 2%); }
.components-polished .site-navigation a { border-radius: 8px; transition: background-color .16s ease, color .16s ease; }
.components-polished .site-navigation a:hover { background: #f7f8fa; color: var(--ui-accent); }
.components-polished .site-navigation a[aria-current="page"] { color: var(--ui-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.components-polished .theme-btn,
.components-polished .site-header__cta {
  min-height: 48px; height: auto; border-radius: 12px; padding: 13px 22px;
  font-family: var(--atube-font-body); font-size: 1rem; font-weight: 500;
  line-height: 1.4; letter-spacing: normal; gap: 10px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.components-polished .theme-btn:not(.theme-btn--outline):not(.theme-btn--light),
.components-polished .site-header__cta { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); box-shadow: 0 2px 3px rgb(139 48 0 / 12%); }
.components-polished .theme-btn.theme-btn--outline { background: #fff; color: var(--ui-ink); border: 1px solid #d9dde5; box-shadow: 0 1px 2px rgb(26 32 44 / 3%); }
.components-polished .theme-btn.theme-btn--light { background: #fff; color: var(--ui-accent); border: 1px solid #fff; box-shadow: none; }
.components-polished .theme-btn::before { content: none; }
.components-polished .theme-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.theme-btn--outline):not(.theme-btn--light),
.components-polished .site-header__cta:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: #fff; }
.components-polished .theme-btn.theme-btn--outline:hover:not(:disabled) { color: var(--ui-accent); border-color: #d6a58b; background: #fffaf7; }
.components-polished .theme-btn.theme-btn--light:hover { background: #fff3eb; color: var(--ui-accent-hover); }
.components-polished .theme-btn:active:not(:disabled) { transform: translateY(1px); }
.components-polished .theme-btn:disabled,
.components-polished .theme-btn[aria-disabled="true"] { background: #f0f2f5; color: #707785; border-color: #dfe3e9; box-shadow: none; transform: none; cursor: not-allowed; }
.components-polished :is(a,button,input,select,summary):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 4px; }
.components-polished main :is(p,li) > a:not(.theme-btn) { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.components-polished main :is(p,li) > a:not(.theme-btn):hover { color: var(--ui-accent-hover); text-decoration-thickness: 2px; }
.components-polished .refresh-text-link { color: var(--ui-accent); text-decoration: none; }
.components-polished .refresh-text-link:hover { text-decoration: underline; text-underline-offset: 5px; color: var(--ui-accent-hover); }
.components-polished :is(.feature-card,.resource-card,.screen-card,.contact-card,.process-card) {
  border: 1px solid var(--ui-line); border-radius: 20px; box-shadow: var(--ui-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.components-polished :is(.feature-card,.resource-card,.screen-card,.contact-card):hover { transform: none; box-shadow: var(--ui-shadow); border-color: var(--ui-line); }
.components-polished :is(.feature-card,.resource-card,.screen-card,.contact-card):focus-within { border-color: #d6a58b; }
.components-polished .feature-card.component-click-card { position: relative; padding: 26px; background: #fff; }
.component-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; width: 100%; }
.component-category-icon { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; color: var(--ui-accent); background: var(--ui-accent-soft); border: 1px solid #f8dfcf; border-radius: 12px; }
.components-polished .guide-category { font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ui-muted); }
.components-polished .guide-index-card h3 { margin: 0 0 14px; }
.components-polished .guide-index-card p { margin: 0 0 22px; color: var(--ui-muted); }
.component-step-count { color: var(--ui-muted); font-size: .875rem; line-height: 1.5; margin-top: auto; margin-bottom: 16px; }
.components-polished .component-card-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; padding-top: 15px; border-top: 1px solid var(--ui-line); color: var(--ui-ink); font-size: 1rem; font-weight: 500; line-height: 1.4; text-decoration: none; }
.component-card-link::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.component-link-arrow { display: inline-flex; flex: 0 0 34px; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--ui-line); border-radius: 50%; background: #fff; color: var(--ui-accent); transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.components-polished .component-click-card:focus-within { outline: 3px solid var(--ui-accent); outline-offset: 4px; }
.components-polished .component-click-card .component-card-link:focus-visible { outline: none; }
.components-polished .gallery-filters { gap: 8px; }
.components-polished .gallery-filters button { min-height: 44px; padding: 10px 17px; border: 1px solid var(--ui-line); border-radius: 11px; color: var(--ui-muted); background: #fff; box-shadow: none; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.components-polished .gallery-filters button.active,
.components-polished .gallery-filters button[aria-pressed="true"] { color: #fff; background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: 0 2px 5px rgb(139 48 0 / 10%); }
.components-polished .gallery-filters button:hover:not(.active):not([aria-pressed="true"]) { color: var(--ui-accent); background: var(--ui-accent-soft); border-color: #f1d4c3; }
.component-search-field { display: flex; align-items: center; gap: 13px; min-height: 58px; width: 100%; padding: 0 18px; border: 1px solid #dce1e8; border-radius: 15px; background: #fff; box-shadow: 0 2px 5px rgb(26 32 44 / 3%); transition: border-color .16s ease, box-shadow .16s ease; }
.component-search-field > i { flex: 0 0 auto; color: #79818f; font-size: 18px; }
.components-polished .component-search-field > input { width: 100%; min-width: 0; min-height: 56px; padding: 14px 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--ui-ink); box-shadow: none; font-family: var(--atube-font-body); font-size: 1rem; line-height: 1.5; font-weight: 400; outline: none; }
.components-polished .component-search-field > input:focus { outline: none; box-shadow: none; }
.component-search-field:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 4px #ffebdf; }
.component-search-field:focus-within > i { color: var(--ui-accent); }
.components-polished .refresh-gallery-toolbar label > .component-search-field { margin-top: 10px; }
.components-polished .guide-search p { width: fit-content; margin-top: 14px; padding: 4px 10px; border-radius: 8px; background: #f3f5f8; color: var(--ui-muted); }
.components-polished .guide-group { scroll-margin-top: 110px; }
.components-polished .refresh-badge { padding: 5px 9px; border-radius: 8px; color: #843000; border-color: #f2d6c5; background: #fff4ec; }
.components-polished .current-guide-aside .refresh-guide-toc { padding: 18px; border: 1px solid var(--ui-line); border-radius: 16px; background: #fafbfc; }
.components-polished .current-guide-aside .refresh-guide-toc a { border: 0; border-radius: 8px; padding: 10px 8px; color: var(--ui-muted); }
.components-polished .current-guide-aside .refresh-guide-toc a:hover { color: var(--ui-accent); background: #fff0e6; }
.components-polished :is(.faq-list,.current-guide-article) details { padding: 0; margin-bottom: 12px; border: 1px solid var(--ui-line); border-radius: 15px; background: #fff; overflow: clip; }
.components-polished :is(.faq-list,.current-guide-article) summary { position: relative; list-style: none; min-height: 60px; padding: 18px 58px 18px 20px; font-size: 1rem; line-height: 1.5; font-weight: 500; cursor: pointer; }
.components-polished :is(.faq-list,.current-guide-article) summary::-webkit-details-marker { display: none; }
.components-polished :is(.faq-list,.current-guide-article) summary:focus-visible { outline-offset: -4px; }
.components-polished :is(.faq-list,.current-guide-article) summary::after { content: '+'; position: absolute; top: 15px; right: 16px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #f5f6f8; color: var(--ui-accent); font: 400 22px/1 var(--atube-font-body); transform: none; }
.components-polished :is(.faq-list,.current-guide-article) details[open] { border-color: #efd0bd; }
.components-polished :is(.faq-list,.current-guide-article) details[open] summary::after { content: '−'; background: var(--ui-accent-soft); }
.components-polished :is(.faq-list,.current-guide-article) details > p { padding: 0 20px 20px; margin: 0; color: var(--ui-muted); }
.components-polished .fd-architectures a { border-radius: 14px; box-shadow: none; transition: border-color .16s ease, background-color .16s ease; }
.components-polished .fd-architectures a:hover { border-color: var(--ui-accent); background: #fff8f3; }
.components-polished .platform-card { box-shadow: var(--ui-shadow); }
.components-polished dialog#current-preview { border-radius: 22px; box-shadow: 0 26px 80px rgb(0 0 0 / 24%); }
@media(hover:hover) and (pointer:fine) {
  .components-polished .feature-card.component-click-card:hover { border-color: #d8b8a5; box-shadow: var(--ui-shadow-raised); transform: translateY(-3px); }
  .component-click-card:hover .component-link-arrow,
  .component-click-card:focus-within .component-link-arrow { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
}
@media(max-width:767px) {
  .components-polished .feature-card.component-click-card { padding: 22px; }
  .components-polished .component-card-link { width: 100%; }
  .components-polished .current-guide-aside .refresh-guide-toc { padding: 16px; }
  .components-polished .current-guide-aside .refresh-guide-toc a { padding: 10px 8px; }
  .components-polished .theme-btn { padding: 12px 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .components-polished .theme-btn,.components-polished .site-header__cta,
  .components-polished .feature-card.component-click-card,
  .components-polished .component-link-arrow,.components-polished .component-search-field,
  .components-polished .gallery-filters button,.components-polished .site-navigation a,
  .components-polished .fd-architectures a { transition: none; transform: none; }
  .components-polished .feature-card.component-click-card:hover { transform: none; }
}