/* Shared RealBot SVG sizes and colours. Loaded after each page's layout CSS. */
.rb-icon {
  --icon-primary: var(--lilac, #baa4ec);
  --icon-accent: var(--peach, #f1bca0);
  --icon-cut: var(--bg-deep, var(--deep, #1c1630));
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: none;
  overflow: visible;
}
.rb-icon .rb-i-base { fill: var(--icon-primary); stroke: none; }
.rb-icon .rb-i-soft { fill: var(--icon-primary); fill-opacity: .22; stroke: none; }
.rb-icon .rb-i-accent { fill: var(--icon-accent); stroke: none; }
.rb-icon .rb-i-cut { fill: var(--icon-cut); stroke: none; }
.rb-icon .rb-i-line, .rb-icon .rb-i-accent-line, .rb-icon .rb-i-cut-line {
  fill: none; stroke: var(--icon-primary); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.rb-icon .rb-i-accent-line { stroke: var(--icon-accent); }
.rb-icon .rb-i-cut-line { stroke: var(--icon-cut); }
.rb-icon-ui { --icon-primary: currentColor; --icon-accent: currentColor; }
[data-rb-icon], .rb-nav-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.rb-icon-button, .rb-icon-button[data-rb-icon] { display: inline-flex; align-items: center; justify-content: center; }
.rb-icon-button .rb-icon, .square-button .rb-icon { width: 20px; height: 20px; }
.rb-nav-item svg.rb-icon { width: 20px; height: 20px; }
.rb-nav-item.active .rb-icon { --icon-primary: var(--deep); --icon-accent: var(--deep); --icon-cut: var(--lilac); }
.rb-nav-item.active .rb-i-soft { fill-opacity: .35; }
.rb-plugin-icon, .rb-feature-icon, .rb-command-icon {
  width: 42px; height: 42px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; border: 1px solid #baa4ec29;
  border-radius: 11px; background: #baa4ec0b;
}
.rb-plugin-icon svg.rb-icon, .rb-feature-icon svg.rb-icon, .rb-command-icon svg.rb-icon { width: 26px; height: 26px; }
.rb-plugin-card.active .rb-plugin-icon, .rb-command-row.active .rb-command-icon { background: #baa4ec16; border-color: #baa4ec58; }
.rb-plugin-card:hover .rb-plugin-icon, .rb-command-row:hover .rb-command-icon { border-color: #baa4ec58; }
.rb-command-row .rb-row-copy { flex: 1; min-width: 0; }
.rb-icon-heading { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.rb-icon-heading > div { min-width: 0; }
.rb-icon-heading > .rb-feature-icon, .rb-icon-heading > .rb-command-icon { margin-top: 1px; }
.rb-icon-heading h3, .rb-icon-heading p { overflow-wrap: anywhere; }
.rb-setup-feature-icon { padding: 0; }
.rb-setup-feature-icon .rb-icon { width: 25px; height: 25px; }
.rb-chevron .rb-icon { width: 16px; height: 16px; }
.rb-button > .rb-icon, .rb-top-link > [data-rb-icon] { width: 17px; height: 17px; }
.rb-top-link { display: inline-flex; align-items: center; gap: 7px; }
.rb-command-trigger > span:first-child, .rb-top-search > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.rb-command-trigger .rb-icon, .rb-top-search .rb-icon { width: 16px; height: 16px; }
.rb-setup-trigger .rb-icon { width: 18px; height: 18px; }
.rb-health-icon .rb-icon { width: 19px; height: 19px; }
.rb-palette-search > [data-rb-icon] .rb-icon { width: 22px; height: 22px; }
.desktop-nav { gap: 23px; margin-left: 2%; }
.desktop-nav a { display: inline-flex; align-items: center; gap: 7px; }
.desktop-nav .rb-icon { width: 17px; height: 17px; }
.mobile-menu a { align-items: center; gap: 12px; }
.mobile-menu a > span:last-child:not([data-rb-icon]) { margin-left: auto; }
.mobile-menu .rb-icon { width: 22px; height: 22px; }
.button .rb-icon, .text-link .rb-icon, .back-top .rb-icon { width: 20px; height: 20px; }
.feature-symbol { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #baa4ec0c; border: 1px solid #baa4ec29; border-radius: 12px; }
.feature-symbol .rb-icon { width: 28px; height: 28px; }
.feature-button { gap: 18px; }
.feature-button.active .feature-symbol, .feature-button:hover .feature-symbol { background: #baa4ec17; border-color: #baa4ec58; }
.feature-button i .rb-icon { width: 20px; height: 20px; }
.feature-button.active i { transform: translateX(3px); }
.feature-details { border-left: 0; padding-left: 0; }
.feature-details > .feature-symbol { width: 56px; height: 56px; margin-bottom: 20px; }
.feature-details > .feature-symbol .rb-icon { width: 36px; height: 36px; }
.play-symbol .rb-icon { width: 22px; height: 22px; }
.creator-search .rb-icon { width: 17px; height: 17px; }
.creator-directory .rb-icon, .photo-caption .rb-icon { width: 18px; height: 18px; }
.spin-button { display: inline-flex; align-items: center; gap: 8px; }
.spin-button .rb-icon { width: 17px; height: 17px; }
.garage-expand-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.garage-expand-button .rb-icon { width: 18px; height: 18px; }
.wall-hint { display: inline-flex; align-items: center; gap: 8px; }
.rb-error-symbol { margin: 22px 0 10px; }
.rb-error-symbol .rb-icon { width: 44px; height: 44px; }
.button-primary .rb-icon:not(.rb-icon-ui) { --icon-primary: var(--bg-deep); --icon-accent: var(--bg-deep); --icon-cut: var(--lilac); }
.rb-channel-type .rb-icon { width: 20px; height: 20px; }
.rb-quick-arrow .rb-icon { width: 20px; height: 20px; }
.rb-xp-card-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rb-xp-card-tile { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--deep); }
.rb-xp-card-tile img { display: block; width: 100%; height: auto; aspect-ratio: 660 / 170; object-fit: contain; }
.rb-xp-card-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12px; }
.rb-xp-card-tile figcaption span { color: var(--muted-2); font-size: 10px; }
@media (max-width: 1170px) and (min-width: 901px) {
  .desktop-nav { gap: 18px; margin-left: 0; }
  .desktop-nav [data-rb-icon] { display: none; }
}
@media (max-width: 600px) {
  .rb-xp-card-library { grid-template-columns: 1fr; }
  .feature-button { gap: 13px; }
  .feature-symbol { width: 38px; height: 38px; border-radius: 10px; }
  .feature-symbol .rb-icon { width: 25px; height: 25px; }
  .rb-plugin-icon, .rb-feature-icon, .rb-command-icon { width: 38px; height: 38px; border-radius: 10px; }
  .rb-plugin-icon svg.rb-icon, .rb-feature-icon svg.rb-icon, .rb-command-icon svg.rb-icon { width: 24px; height: 24px; }
}
@media (forced-colors: active) {
  .rb-icon { --icon-primary: CanvasText; --icon-accent: CanvasText; --icon-cut: Canvas; }
  .rb-icon-ui { --icon-primary: currentColor; }
  .rb-icon .rb-i-soft { fill-opacity: .4; }
  .rb-plugin-icon, .rb-feature-icon, .rb-command-icon, .feature-symbol { border-color: CanvasText; }
}