/* Design modes - parts every mode shares: the banner at the top and the canvas of the falling effects (see public/js/theme.js) */
.gp-theme-banner {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5em 0.9em;
  margin: 0 0 1.3em; padding: 0.7em 2.6em 0.7em 1em; text-align: center; font-size: 0.92rem; font-weight: 600; color: var(--text);
  background: linear-gradient(100deg, rgba(var(--blue-rgb), 0.30), rgba(var(--violet-rgb), 0.30));
  border: 1px solid rgba(var(--blue-bright-rgb), 0.45); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px -18px rgba(var(--blue-rgb), 0.8);
}
/* on pages without the dashboard layout (landing page, login ...) the banner is a bar over the full width */
body > .gp-theme-banner { margin: 0; border-radius: 0; border-width: 0 0 1px 0; }
.gp-theme-banner .gp-tb-icon { font-size: 1.15em; line-height: 1; }
.gp-theme-banner .gp-tb-text { overflow-wrap: anywhere; }
.gp-theme-banner .gp-tb-code {
  display: inline-flex; align-items: center; gap: 0.55em; padding: 0.2em 0.35em 0.2em 0.7em; font: inherit; font-size: 0.86rem; color: var(--text); cursor: pointer;
  background: rgba(7, 10, 22, 0.55); border: 1px dashed rgba(var(--blue-bright-rgb), 0.8); border-radius: 999px;
}
.gp-theme-banner .gp-tb-code b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; color: var(--cyan); }
.gp-theme-banner .gp-tb-code em { font-style: normal; font-weight: 600; color: var(--text); }
.gp-theme-banner .gp-tb-code i { font-style: normal; font-size: 0.74rem; padding: 0.2em 0.65em; border-radius: 999px; background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; }
.gp-theme-banner .gp-tb-code:hover { border-style: solid; }
.gp-theme-banner .gp-tb-close {
  position: absolute; right: 0.45em; top: 50%; transform: translateY(-50%); width: 1.9em; height: 1.9em; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-dim); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.gp-theme-banner .gp-tb-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.gp-theme-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
@media (max-width: 640px) { .gp-theme-banner { font-size: 0.86rem; margin-bottom: 1em; } }