/* ==================================================
APP UI COMPONENTS
Buttons, cards, forms, tables, alerts, badges, modal
================================================== */

/* ===================================
Button styles
button, btn-sm, btn-lg, btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-purple, btn-indigo, btn-teal, btn-cyan, btn-orange, btn-pink, btn-outline-primary, btn-outline-purple
explain these group of class styles: app-btn, app-btn-sm, app-btn-lg
- display: inline-flex; - display the button as an inline-flex container
- align-items: center; - align the button in the center
- justify-content: center; - justify the button in the center
- gap: 0.35rem; - add a gap between the button and its children
- border: 1px solid transparent; - add a transparent border to the button
- border-radius: var(--app-radius); - add a border radius to the button
- padding: 0.46rem 0.82rem; - add a padding to the button
- font-size: 0.8rem; - set the font size of the button
- font-weight: 600; - set the font weight of the button
- cursor: pointer; - set the cursor to a pointer when the button is hovered
- transition: 0.2s ease; - add a transition to the button
=====================================*/

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--app-radius);
  padding: 0.46rem 0.82rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  /* transition: 0.2s ease; */
  min-width: 108px;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.18s ease, transform 0.12s ease;
}
.app-btn:hover { transform: translateY(-1px); text-decoration: none; }
.app-btn:active { transform: translateY(0); }
.app-btn:disabled { opacity: 0.55; pointer-events: none; }
.app-btn-xs { padding: 0.24rem 0.45rem; font-size: 0.7rem; }
.app-btn-sm { padding: 0.34rem 0.65rem; font-size: 0.74rem; }
.app-btn-md { padding: 0.44rem 0.75rem; font-size: 0.8rem; }
.app-btn-lg { padding: 0.6rem 1rem; font-size: 0.88rem; }

.app-btn-primary { background: var(--app-primary); color: #fff; border: 1px solid var(--app-primary);}
.app-btn-secondary { background: var(--app-secondary); color: #fff; border: 1px solid var(--app-secondary);}
.app-btn-success { background: var(--app-success); color: #fff; border: 1px solid var(--app-success);}
.app-btn-danger { background: var(--app-danger); color: #fff; border: 1px solid var(--app-danger);}
.app-btn-warning { background: var(--app-warning); color: #fff; border: 1px solid var(--app-warning);}
.app-btn-purple { background: var(--app-purple); color: #fff; border: 1px solid var(--app-purple);}
.app-btn-indigo { background: var(--app-indigo); color: #fff; border: 1px solid var(--app-indigo);}
.app-btn-teal { background: var(--app-teal); color: #fff; border: 1px solid var(--app-teal);}
.app-btn-cyan { background: var(--app-cyan); color: #fff; border: 1px solid var(--app-cyan);}
.app-btn-orange { background: var(--app-orange); color: #fff; border: 1px solid var(--app-orange);}
.app-btn-pink { background: var(--app-pink); color: #fff; border: 1px solid var(--app-pink);}
.app-btn-dark { background: var(--app-dark); color: #fff; border: 1px solid var(--app-dark);}

.app-btn-outline-primary { border-color: var(--app-primary); color: var(--app-primary); background: transparent; }
.app-btn-outline-purple { border-color: var(--app-purple); color: var(--app-purple); background: transparent; }

.home-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 108px;
  padding: 0.58rem 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--home-black);
  background-color: var(--home-black);
  color: var(--home-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.83rem;
  line-height: 1;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.home-btn:hover,
.home-btn:focus-visible {
  background-color: var(--home-black-hover);
  color: var(--home-white);
  transform: translateY(-1px);
}

.home-btn-secondary {
  background-color: transparent;
  color: var(--home-black);
}

.home-btn-secondary:hover,
.home-btn-secondary:focus-visible {
  background-color: var(--home-black);
  color: var(--home-white);
}

/* ===================================
Card styles
card, card-header, card-body, card-footer
explain these group of class styles: app-card, app-card-header, app-card-body, app-card-footer
- background: var(--app-surface); - set the background color of the card to the surface color
- border: 1px solid var(--app-border); - add a border to the card
- border-radius: var(--app-radius-lg); - add a border radius to the card
- box-shadow: var(--app-shadow-sm); - add a shadow to the card
=====================================*/
.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
}
.app-card:hover { box-shadow: var(--app-shadow-md); }
.app-card-header, .app-card-body, .app-card-footer { padding: 0.85rem; }
.app-card-header { border-bottom: 1px solid var(--app-border); }
.app-card-footer { border-top: 1px solid var(--app-border); }


/* ===================================
Form label styles
label
explain these group of class styles: app-form-label
- display: block; - display the label as a block element
- margin-bottom: 0.3rem; - add a margin bottom to the label
- font-size: 0.78rem; - set the font size of the label
- font-weight: 600; - set the font weight of the label
- color: var(--app-slate-700); - set the color of the label
=====================================*/

.app-form-label { display: block; margin-bottom: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--app-slate-700); }
.app-form-control,
.app-form-select {
  width: 100%;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: #fff;
  min-height: 35px;
  padding: 0.44rem 0.62rem;
  font-size: 0.82rem;
  color: var(--app-slate-800);
}

/* ===================================
Focus styles
what is the focus styles?
- the focus styles is the style that is applied to the input when it is focused
- it is used to indicate that the input is focused
- it is used to indicate that the input is selected
- it is used to indicate that the input is active
- it is used to indicate that the input is hovered
- it is used to indicate that the input is clicked
- it is used to indicate that the input is scrolled
- it is used to indicate that the input is focused
explain the focus styles
- outline: none; - remove the default outline
- border-color: var(--app-primary); - change the border color to the primary color
- box-shadow: 0 0 0 3px rgba(37,99,235,0.16); - add a subtle box shadow to the input
=====================================*/
.app-form-control:focus,
.app-form-select:focus { outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.16); }
.app-form-control.app-is-invalid { border-color: var(--app-danger); }
.app-form-control.app-is-valid { border-color: var(--app-success); }
.app-form-feedback { font-size: 0.74rem; margin-top: 0.25rem; }
.app-form-feedback.app-error { color: var(--app-danger); }
.app-form-feedback.app-success { color: var(--app-success); }



/* ===================================
Form check styles
checkbox, radio, switch
explain these group of class styles: app-form-check, app-form-switch, app-input-group
- display: flex; - display the checkbox or radio button in a flex container
- align-items: center; - align the checkbox or radio button in the center
- gap: 0.45rem; - add a gap between the checkbox or radio button and the label
- font-size: 0.8rem; - set the font size of the label
- color: var(--app-slate-700); - set the color of the label
- accent-color: var(--app-primary); - set the color of the checkbox or radio button
=====================================*/
.app-form-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--app-slate-700); }
.app-form-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; }
.app-form-switch input { accent-color: var(--app-primary); }

.app-input-group { display: flex; gap: 0; }
.app-input-group .app-form-control { border-radius: 0; }
.app-input-group .app-form-control:first-child { border-top-left-radius: var(--app-radius); border-bottom-left-radius: var(--app-radius); }
.app-input-group .app-form-control:last-child { border-top-right-radius: var(--app-radius); border-bottom-right-radius: var(--app-radius); }


/* ===================================
Table styles
table, thead, tbody, tr, th, td
explain these group of class styles: app-table-wrap, app-table
- overflow-x: auto; - add a horizontal scroll to the table
- border: 1px solid var(--app-border); - add a border to the table and its children
- border-radius: var(--app-radius-lg); - add a border radius to the table and its children
- width: 100%; - set the width of the table and its children to 100%
- border-collapse: collapse; - collapse the border of the table and its children
- font-size: 0.79rem; - set the font size of the table and its children
- background: #fff; - set the background color of the table and its children to white
=====================================*/
.app-table-wrap { overflow-x: auto; border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); width: 100%; border-collapse: collapse; font-size: 0.79rem; background: #fff; }
.app-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; background: #fff; }
.app-table th, .app-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--app-border); text-align: left; }
.app-table th { background: var(--app-slate-100); font-size: 0.72rem; text-transform: uppercase; color: var(--app-slate-600); }
.app-table-hover tbody tr:hover { background: var(--app-primary-100); }
.app-table-striped tbody tr:nth-child(even) { background: var(--app-slate-100); }



/* ===================================
Alert styles
app-alert 
explain what these group of class styles do: app-alert, app-alert-success, app-alert-danger, app-alert-warning, app-alert-info, app-alert-dismissible
- border-radius: var(--app-radius); - add a border radius to the alert
- padding: 0.58rem 0.7rem; - add a padding to the alert
- border: 1px solid transparent; - add a border to the alert
=====================================*/
.app-alert {
  border-radius: var(--app-radius);
  padding: 0.58rem 0.7rem;
  border: 1px solid transparent;
  font-size: 0.8rem;
}
.app-alert-primary { background: var(--app-primary-100); border-color: var(--app-primary-200); color: var(--app-primary-800); }
.app-alert-success { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.app-alert-danger { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.app-alert-warning { background: #fef9c3; border-color: #fde68a; color: #92400e; }
.app-alert-info { background: #e0f7fa; border-color: #b2ebf2; color: #006064; }
.app-alert-purple { background: var(--app-purple-100); border-color: var(--app-purple-200); color: var(--app-purple-800); }
.app-alert-orange { background: var(--app-orange-100); border-color: var(--app-orange-200); color: var(--app-orange-800); }
.app-alert-indigo { background: var(--app-indigo-100); border-color: var(--app-indigo-200); color: var(--app-indigo-800); }
.app-alert-teal { background: var(--app-teal-100); border-color: var(--app-teal-200); color: var(--app-teal-800); }
.app-alert-cyan { background: var(--app-cyan-100); border-color: var(--app-cyan-200); color: var(--app-cyan-800); }
.app-alert-pink { background: var(--app-pink-100); border-color: var(--app-pink-200); color: var(--app-pink-800); }

/* ===================================
Badge styles
badge, badge-primary, badge-secondary, badge-success, badge-danger, badge-warning, badge-info, badge-purple, badge-pink
explain these group of class styles: app-badge, app-badge-primary, app-badge-secondary, app-badge-success, app-badge-danger, app-badge-warning, app-badge-info, app-badge-purple, app-badge-pink
- display: inline-flex; - display the badge as an inline-flex container
- align-items: center; - align the badge in the center
- justify-content: center; - justify the badge in the center
- border-radius: 999px; - add a border radius to the badge
- padding: 0.18rem 0.5rem; - add a padding to the badge
- font-size: 0.7rem; - set the font size of the badge
- font-weight: 700; - set the font weight of the badge
=====================================*/
.app-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.app-badge-primary { background: var(--app-primary-100); color: var(--app-primary-700); }
.app-badge-secondary { background: var(--app-secondary-100); color: var(--app-secondary-700); }
.app-badge-success { background: var(--app-success-100); color: var(--app-success-700); }
.app-badge-danger { background: var(--app-danger-100); color: var(--app-danger-700); }
.app-badge-warning { background: var(--app-warning-100); color: var(--app-warning-700); }
.app-badge-info { background: var(--app-info-100); color: var(--app-info-700); }
.app-badge-purple { background: var(--app-purple-100); color: var(--app-purple-700); }
.app-badge-pink { background: var(--app-pink-100); color: var(--app-pink-700); }
.app-alert-cyan {background: var(--app-cyan-100); color: var(--app-cyan-700);}

/* ===================================
Modal styles
modal, modal-dialog, modal-content, modal-header, modal-body, modal-footer
explain these group of class styles: app-modal, app-modal-dialog, app-modal-content, app-modal-header, app-modal-body, app-modal-footer
- display: none; - display the modal as a none element
- position: fixed; - position the modal as a fixed element
- inset: 0; - set the inset of the modal to 0
- z-index: 999; - set the z-index of the modal to 999
=====================================*/

.app-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(2, 6, 23, 0.45);
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}
.app-modal.app-open { display: flex; }
.app-modal-dialog {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
  border: 1px solid var(--app-border);
}


/* ===================================================
CCU — Shelf grid (home page)
=======================================================*/
.ccu-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}

/* `a.ccu-shelf-card` (not `.ccu-shelf-card`) is deliberate: it's a class+type
   selector so its specificity matches `.app-ui a` in app-ui-core.css — a bare
   class selector loses that tie and the generic link-blue color wins instead. */
a.ccu-shelf-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 0.9rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  text-decoration: none;
  color: var(--app-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.ccu-shelf-card:hover,
a.ccu-shelf-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
  text-decoration: none;
  color: var(--app-text);
}

.ccu-shelf-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--app-radius);
  background: var(--app-primary-100);
  color: var(--app-primary);
  font-size: 1.15rem;
}

.ccu-shelf-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.ccu-shelf-card-summary {
  font-size: 0.78rem;
  color: var(--app-muted);
  line-height: 1.4;
}


/* ===================================================
CCU — Shelf page: chapter groups + article rows
=======================================================*/
.ccu-chapter-group { margin-bottom: 1.5rem; }

.ccu-chapter-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--app-primary-700);
}

/* Same `a.` specificity fix as .ccu-shelf-card above. bookmarks.js reuses this
   class on a plain <div> wrapper (its actual link has an inline color:inherit),
   so this rule intentionally only targets the <a>-rendered usages. */
a.ccu-article-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  text-decoration: none;
  color: var(--app-text);
  margin-bottom: 0.5rem;
}

a.ccu-article-row:hover {
  border-color: var(--app-primary-300);
  text-decoration: none;
  color: var(--app-text);
}

/* The bookmarks-page <div> reuses this class purely for the box/spacing styles. */
div.ccu-article-row {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.ccu-article-row-title { flex: 1; font-size: 0.86rem; font-weight: 600; }
.ccu-article-row .fa-chevron-right { color: var(--app-muted); font-size: 0.75rem; }


/* ===================================================
CCU — Status chip (FR-7: verified fact vs. marketing/coming soon)
=======================================================*/
.ccu-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ccu-status-chip.is-verified_fact { background: var(--ccu-verified-bg); color: var(--ccu-verified); }
.ccu-status-chip.is-marketing { background: var(--ccu-marketing-bg); color: var(--ccu-marketing); }
.ccu-status-chip.is-coming_soon { background: var(--ccu-coming-soon-bg); color: var(--ccu-coming-soon); }


/* ===================================================
CCU — Article reader
=======================================================*/
.ccu-article-header { margin-bottom: 1.25rem; }

.ccu-article-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0.4rem 0 0.5rem;
}

.ccu-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--app-muted);
}

.ccu-article-body {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--app-text);
}

.ccu-article-body p { margin: 0 0 1rem; }
.ccu-article-body ul,
.ccu-article-body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.ccu-article-body li { margin-bottom: 0.4rem; }
.ccu-article-body strong { font-weight: 700; }

/* Long legal/policy documents (Terms, Trademark, the 15 corporate policies)
   use these for their internal numbered sections — plain articles never need them. */
.ccu-article-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--app-primary-700);
  margin: 1.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--app-border);
}
.ccu-article-body h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.ccu-article-body h4 { font-size: 0.92rem; font-weight: 700; margin: 1rem 0 0.4rem; }
.ccu-article-body .ccu-doc-meta { font-size: 0.78rem; color: var(--app-muted); margin-bottom: 1.25rem; }

/* Inline glossary term — tappable/hoverable definition (FR-5) */
.ccu-glossary-term {
  border-bottom: 1px dashed var(--app-primary-300);
  color: var(--app-primary-700);
  cursor: help;
  font-weight: 600;
}

.ccu-glossary-tooltip {
  position: absolute;
  z-index: 300;
  max-width: 260px;
  padding: 0.6rem 0.75rem;
  background: var(--app-primary-800);
  color: var(--app-white);
  border-radius: var(--app-radius);
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: var(--app-shadow-lg);
}


/* ===================================================
CCU — Bookmark toggle (FR-3, localStorage-backed, no auth)
=======================================================*/
.ccu-bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.ccu-bookmark-btn.is-bookmarked {
  color: var(--app-orange);
  border-color: var(--app-orange-300);
  background: var(--app-orange-100);
}


/* ===================================================
CCU — Feedback widget ("Was this helpful?", FR-4)
=======================================================*/
.ccu-feedback {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-slate-100);
  text-align: center;
}

.ccu-feedback-prompt { font-weight: 700; font-size: 0.86rem; margin-bottom: 0.6rem; }

.ccu-feedback-buttons { display: flex; justify-content: center; gap: 0.6rem; }

.ccu-feedback-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.ccu-feedback-buttons button:hover { border-color: var(--app-primary); color: var(--app-primary); }
.ccu-feedback-buttons button.is-selected { border-color: var(--app-primary); background: var(--app-primary-100); color: var(--app-primary-700); }
.ccu-feedback-thanks { font-size: 0.82rem; color: var(--ccu-verified); font-weight: 600; }


/* ===================================================
CCU — "Still need help?" CTA (FR-8)
--------------------------------------------------
`a.ccu-help-cta` (not `.ccu-help-cta`) — same specificity fix as the shelf
card/article row above: without the `a.` prefix, `.app-ui a` in
app-ui-core.css (a class+type selector) outranks a bare class selector and
silently repaints this navy-on-navy button's text navy-on-navy again.
Sub-text also gets its own class rather than a blanket `span` selector, so
its dimmed color is never compounded by a parent span carrying the same rule.
=======================================================*/
a.ccu-help-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--app-radius-lg);
  background: var(--app-primary);
  color: var(--app-white);
  text-decoration: none;
}

a.ccu-help-cta i { font-size: 1.3rem; color: var(--app-white); }
a.ccu-help-cta .ccu-help-cta-text { display: flex; flex-direction: column; }
a.ccu-help-cta strong { font-size: 0.86rem; color: var(--app-white); }
a.ccu-help-cta .ccu-help-cta-sub { font-size: 0.76rem; color: #d7e6f2; }
a.ccu-help-cta:hover { color: var(--app-white); background: var(--app-primary-700); }


/* ===================================================
CCU — Install-app banner (the one place the orange accent leads)
=======================================================*/
.ccu-install-banner {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--app-radius-lg);
  background: var(--app-orange-100);
  border: 1px solid var(--app-orange-200);
}

.ccu-install-banner.is-visible { display: flex; }
.ccu-install-banner i { color: var(--app-orange-600); font-size: 1.4rem; }
.ccu-install-banner-text { flex: 1; font-size: 0.8rem; color: var(--app-orange-800); }
.ccu-install-banner button.ccu-install-btn {
  background: var(--app-orange);
  color: #fff;
  border: none;
  border-radius: var(--app-radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.ccu-install-banner button.ccu-install-dismiss {
  background: none;
  border: none;
  color: var(--app-orange-700);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem;
}


/* ===================================================
CCU — Search
=======================================================*/
.ccu-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  margin-bottom: 1.25rem;
}

.ccu-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.88rem;
  background: transparent;
}

.ccu-search-box i { color: var(--app-muted); }

/* Same `a.` specificity fix as .ccu-shelf-card above. */
a.ccu-search-result {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  text-decoration: none;
  color: var(--app-text);
  margin-bottom: 0.5rem;
}

a.ccu-search-result:hover { border-color: var(--app-primary-300); text-decoration: none; color: var(--app-text); }
.ccu-search-result-shelf { font-size: 0.72rem; color: var(--app-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ccu-search-result-title { font-size: 0.88rem; font-weight: 700; }


/* ===================================================
CCU — Loading / empty states
=======================================================*/
.ccu-loading,
.ccu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--app-muted);
}

.ccu-loading i,
.ccu-empty i { font-size: 1.8rem; opacity: 0.5; }
.ccu-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--app-border);
  border-top-color: var(--app-primary);
  border-radius: 50%;
  animation: ccuSpin 0.7s linear infinite;
}

@keyframes ccuSpin { to { transform: rotate(360deg); } }


/* ===================================================
CCU — Toast (see toast() in app.js)
=======================================================*/
.ccu-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ccu-bottomnav-height) + 1rem);
  transform: translateX(-50%);
  z-index: 400;
  max-width: 90vw;
  box-shadow: var(--app-shadow-lg);
  transition: opacity 0.25s ease;
}

.ccu-toast.is-leaving { opacity: 0; }

@media (min-width: 768px) {
  .ccu-toast { bottom: 1.25rem; }
}