/*
 * Generic/Common Conesnt form CSS
 * Copyright 2026 Cymplicity Software LLC.
 */
@charset "UTF-8";

  :root {
      --cb-bg:      #1e2024;
      --cb-surface: #2a2d33;
      --cb-text:    #e9eaec;
      --cb-muted:   #a6abb3;
      --cb-line:    #3a3e45;
      --cb-accent:  #4f8cff;
      --cb-accent-ink: #ffffff;
  }

  .cb-banner {
      position: fixed;
      inset: auto 1rem 1rem 1rem;
      max-width: 490px;
      margin-left: auto;
      background: var(--cb-bg);
      color: var(--cb-text);
      border: 1px solid var(--cb-line);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
      padding: 1.25rem 1.25rem 1rem;
      font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      z-index: 9999;
  }
  .cb-banner h2 { margin: 0 0 .4rem; font-size: .90rem; }
  .cb-banner p  { margin: 0 0 .9rem; color: var(--cb-muted); font-size: .85rem; }
  .cb-banner a  { color: var(--cb-accent); }

  .cb-cats { margin: .25rem 0 1rem; border-top: 1px solid var(--cb-line); }
  .cb-cat {
      display: flex; align-items: flex-start; gap: .6rem;
      padding: .65rem 0; border-bottom: 1px solid var(--cb-line);
  }
  .cb-cat label { font-weight: 600; }
  .cb-cat small { display: block; color: var(--cb-muted); font-weight: 400; }
  .cb-cat input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--cb-accent); }
  .cb-cat input:disabled { opacity: .55; }

  .cb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .cb-btn {
      flex: 1 1 auto; min-width: 100px;
      padding: .6rem .9rem; border-radius: 9px;
      font: inherit; font-weight: 600; cursor: pointer;
      border: 1px solid var(--cb-line); background: var(--cb-surface); color: var(--cb-text);
  }
  .cb-btn:hover { border-color: var(--cb-muted); }
  .cb-btn--primary { background: var(--cb-accent); border-color: var(--cb-accent); color: var(--cb-accent-ink); }
  .cb-btn:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }

  .cb-prefs[hidden] { display: none; }
  .cb-toggle-link {
      background: none; border: 0; padding: 0; color: var(--cb-accent);
      font: inherit; cursor: pointer; text-decoration: underline;
  }

  @media (prefers-reduced-motion: no-preference) {
      .cb-banner { animation: cb-rise .25s ease-out; }
      @keyframes cb-rise { from { transform: translateY(12px); opacity: 0; } }
  }