/* ===================================
   Cortex App -- Navbar user menu
   Hover-extend on desktop (matches `.cortex-report-dropdown`),
   tap-to-toggle on touch via Bootstrap's `data-bs-toggle="dropdown"`.
   The trigger label swaps from "Menu" text to a burger glyph below
   the 768px breakpoint already used elsewhere in this file.
   =================================== */
:root {
  --cortex-navbar-height: 56px;
}

.cortex-user-menu-link {
  color: var(--cortex-text) !important;
  font-family: var(--cortex-font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.85rem;
  border-radius: var(--cortex-radius-sm);
  transition: background 0.25s, color 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cortex-user-menu-link:hover,
.cortex-user-menu-link:focus,
.cortex-user-menu-link[aria-expanded="true"] {
  color: var(--cortex-cyan) !important;
  background: rgba(43, 212, 212, 0.08);
}

.cortex-user-menu-burger {
  display: none;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

@media (max-width: 768px) {
  .cortex-user-menu-link .cortex-user-menu-label,
  .cortex-user-menu-link.dropdown-toggle::after {
    display: none;
  }
  .cortex-user-menu-burger {
    display: inline-block;
  }
}

/* Pin the menu to the right of its trigger. The hover-extend rule sets
   `display: block` without going through Popper, so Bootstrap's
   `dropdown-menu-end` (which is scoped to `[data-bs-popper]`) doesn't
   apply and the menu would otherwise extend rightward off-screen. */
.cortex-user-menu-dropdown > .dropdown-menu {
  right: 0;
  left: auto;
  max-width: calc(100vw - 0.5rem);
}

/* Position is owned by CSS on both paths: the hover-extend rule below
   just toggles `display`, and the trigger carries `data-bs-display="static"`
   so the click path is opted out of Popper. `top: 100%` places the menu
   directly below the trigger. No `margin-top` gap: the menu is absolutely
   positioned and so doesn't extend the wrapper's hover box, and any gap
   between the trigger and the menu is a dead zone where the cursor is over
   neither element — crossing it drops the wrapper's `:hover` and closes the
   menu. Keeping the menu flush against the trigger lets the cursor travel
   from button to menu without leaving the hover area. */
.cortex-copy-range-dropdown > .dropdown-menu {
  top: 100%;
  left: 0;
  right: auto;
  margin-top: 0;
}

/* Mobile: the toolbar wraps and the trigger may sit near the right
   edge of the viewport, so flip the anchor to the right edge of the
   trigger — the menu extends leftward from the button and stays
   on-screen. Mirrors the breakpoint + flip used by
   `.cortex-display-mode-strategy-menu` and `.cortex-height-mode-menu`. */
@media (max-width: 1080px) {
  .cortex-copy-range-dropdown > .dropdown-menu {
    left: auto;
    right: 0;
  }
}

.cortex-dropdown-menu {
  /* Opaque (no translucency/blur) so the menu doesn't visually mix with the
     solver config panel underneath when opened over it. */
  background: rgb(20, 22, 27);
  border: 1px solid var(--cortex-border);
  border-radius: 12px;
  padding: 0.35rem;
  min-width: 10rem;
}

.cortex-dropdown-menu .dropdown-item {
  color: var(--cortex-text);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}

.cortex-dropdown-menu .dropdown-item:hover,
.cortex-dropdown-menu .dropdown-item:focus {
  background: rgba(175, 0, 0, 0.08);
  color: var(--cortex-cyan);
}

.cortex-dropdown-menu .dropdown-divider {
  border-top-color: var(--cortex-border);
  margin: 0.35rem 0;
}

.cortex-dropdown-menu form .dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
}

/* ===================================
   Cortex App -- Settings pane
   2/3 viewport width, 3/4 of usable (below-navbar) height,
   centered both axes via flexbox so top/bottom and left/right
   margins are inherently equal.
   =================================== */
.cortex-settings-wrapper {
  /* Break out of the Bootstrap .container's max-width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  min-height: calc(100vh - var(--cortex-navbar-height));
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.cortex-settings-pane {
  width: 66.6667vw;
  height: calc((100vh - var(--cortex-navbar-height)) * 0.75);
  background: var(--cortex-surface);
  border: 1px solid var(--cortex-border);
  border-radius: var(--cortex-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--cortex-glow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cortex-settings-tabs {
  border-bottom: 1px solid var(--cortex-border);
  padding: 0 1rem;
  flex-shrink: 0;
}

.cortex-settings-tabs .nav-link {
  color: var(--cortex-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--cortex-font-body);
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.25rem;
  transition: color 0.25s, border-color 0.25s;
}

.cortex-settings-tabs .nav-link:hover {
  color: var(--cortex-cyan);
}

.cortex-settings-tabs .nav-link.active {
  color: var(--cortex-cyan);
  background: transparent;
  border-bottom: 2px solid var(--cortex-cyan);
}

.cortex-settings-tabcontent {
  padding: 1.5rem;
  overflow-y: auto;
  flex-grow: 1;
  color: var(--cortex-text);
}

/* Nested German/English language tabs inside a legal pane. Lighter than the
   outer settings tabs: flush left and only a little breathing room above the
   content (the pane already supplies the surrounding 1.5rem padding). */
.cortex-legal-lang-tabs {
  padding: 0;
  margin-bottom: 0.25rem;
}

.cortex-legal-lang-content {
  padding-top: 1rem;
  color: var(--cortex-text);
}

/* Bottom-left "Back to Cortex" escape hatch. Pinned to the bottom of the
   pane (flex-shrink: 0) so the scrollable tab content shrinks instead of
   the link sliding off-screen on short viewports. */
.cortex-settings-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--cortex-border);
}

/* ---- Responsive: stack and grow on small screens ---- */
@media (max-width: 768px) {
  .cortex-settings-pane {
    width: 92vw;
    height: auto;
    min-height: calc((100vh - var(--cortex-navbar-height)) * 0.75);
  }

  .cortex-settings-tabs .nav-link {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
  }

  .cortex-settings-tabcontent {
    padding: 1rem;
  }

  .cortex-settings-footer {
    padding: 0.6rem 0.9rem;
  }
}

/* ===================================
   Cortex App -- Settings pane button overrides
   Bootstrap's `btn-outline-primary` / `-secondary` defaults read as
   blue/gray and clash with the cortex red theme used everywhere else
   (role badge, info banner, dropdown hovers, notification switches).
   Scope these overrides to `.cortex-settings-pane` so we don't bleed
   into auth/marketing flows that may rely on Bootstrap's defaults.
   =================================== */
.cortex-settings-pane .btn-outline-primary {
  color: var(--cortex-cyan);
  border-color: var(--cortex-cyan);
  background-color: transparent;
}

.cortex-settings-pane .btn-outline-primary:hover,
.cortex-settings-pane .btn-outline-primary:focus {
  color: #fff;
  background-color: var(--cortex-cyan);
  border-color: var(--cortex-cyan);
  box-shadow: 0 0 16px rgba(175, 0, 0, 0.25);
}

.cortex-settings-pane .btn-outline-primary:active,
.cortex-settings-pane .btn-outline-primary.active {
  color: #fff;
  background-color: var(--cortex-blue);
  border-color: var(--cortex-blue);
}

.cortex-settings-pane .btn-outline-secondary {
  color: var(--cortex-text-muted);
  border-color: var(--cortex-border);
  background-color: transparent;
}

.cortex-settings-pane .btn-outline-secondary:hover:not(:disabled),
.cortex-settings-pane .btn-outline-secondary:focus:not(:disabled) {
  color: var(--cortex-text);
  background-color: rgba(175, 0, 0, 0.08);
  border-color: var(--cortex-cyan);
}

.cortex-settings-pane .btn-outline-secondary:disabled,
.cortex-settings-pane .btn-outline-secondary.disabled {
  color: var(--cortex-text-muted);
  border-color: var(--cortex-border);
  opacity: 0.55;
}

/* ===================================
   Cortex App -- Settings info banner
   =================================== */
.cortex-settings-info {
  margin: 0.75rem 1rem 0;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: rgba(175, 0, 0, 0.08);
  border: 1px solid var(--cortex-border);
  color: var(--cortex-cyan);
  font-size: 0.9rem;
}

/* ===================================
   Cortex App -- Account tab
   =================================== */
.cortex-account-section {
  padding: 0.75rem 0 1.25rem;
  border-bottom: 1px solid var(--cortex-border);
}

.cortex-account-section:last-child {
  border-bottom: none;
}

.cortex-account-header {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.cortex-account-label {
  display: block;
  color: var(--cortex-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.cortex-account-value {
  display: block;
  color: var(--cortex-text);
  font-size: 1rem;
  font-weight: 500;
}

.cortex-account-role-badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: rgba(124, 0, 0, 0.15);
  border: 1px solid rgba(124, 0, 0, 0.35);
  color: var(--cortex-blue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cortex-account-section-title {
  color: var(--cortex-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}

/* Responsive 16:9 iframe wrapper for the Settings "Tutorial" tab video.
   Mirrors the .cortex-video-embed rule in thank-you.css (the two pages load
   different stylesheets, so the shared visual lives in both). */
.cortex-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cortex-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  background: #000;
}

.cortex-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cortex-settings-video {
  margin-top: 0.6rem;
  max-width: 720px;
}

.cortex-account-hint {
  color: var(--cortex-text-muted);
  font-size: 0.9rem;
  margin: 0 0 0.9rem;
}

/* ===================================
   Cortex App -- Account delete (progressive disclosure)
   Three-stage gray flow: caret → "Continue…" → "Delete my account".
   Bootstrap collapse drives the toggling; styling here just neutralizes
   the accordion's panel chrome so the caret reads as a quiet inline control.
   =================================== */
.cortex-account-delete-accordion,
.cortex-account-delete-accordion .accordion-item {
  background: transparent;
  border: 0;
}

.cortex-account-delete-toggle.accordion-button {
  background: transparent;
  color: var(--cortex-text-muted);
  font-size: 0.95rem;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

.cortex-account-delete-toggle.accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--cortex-text);
  box-shadow: none;
}

.cortex-account-delete-accordion .accordion-body {
  padding: 0.75rem 0 0;
}

.cortex-account-delete-final {
  margin-top: 0.5rem;
}

/* ===================================
   Cortex App -- Features table (Account tab)
   Three columns: name / status / action. Owned rows render a disabled-look
   Cancel button; un-owned actionable rows render a Buy link.
   =================================== */
.cortex-features-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cortex-features-table th {
  color: var(--cortex-text-muted);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cortex-features-table td {
  padding: 0.6rem;
  vertical-align: middle;
}

.cortex-features-name {
  font-weight: 500;
}

.cortex-features-status {
  color: var(--cortex-text-muted);
}

.cortex-features-action {
  text-align: right;
  white-space: nowrap;
}

.cortex-notifications-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.cortex-notifications-row {
  padding-left: 3rem;
}

.cortex-notifications-row .form-check-input {
  margin-left: -2.5rem;
  width: 2.4em;
  background-color: rgba(133, 153, 169, 0.25);
  border-color: var(--cortex-border);
}

.cortex-notifications-row .form-check-input:checked {
  background-color: var(--cortex-cyan);
  border-color: var(--cortex-cyan);
}

.cortex-notifications-row .form-check-label {
  color: var(--cortex-text);
  cursor: pointer;
  margin-left: 1rem;
}

.cortex-notifications-locked .form-check-input:disabled,
.cortex-notifications-locked .form-check-label {
  opacity: 0.65;
  cursor: default;
}

.cortex-notifications-form > .btn {
  align-self: flex-start;
  width: 33.3333%;
  min-width: 10rem;
}

@media (max-width: 768px) {
  .cortex-notifications-form > .btn {
    width: 100%;
  }
}

/* Every appearance picker is a <fieldset>; strip the native chrome (border,
   default ~2px side margin, ~6px padding, and `min-width: min-content`) on
   the shared class so all three pickers sit flush with the panel's left edge
   — same alignment as the Account tab's sections and the Notifications
   toggles. The <legend> behaves like a normal block label. */
.cortex-appearance-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.cortex-appearance-label {
  color: var(--cortex-text);
}

/* Auto-save feedback: a small "Saved" flash that replaces the Save button on
   the preferences forms. Fades in on each successful save and out after a
   moment; turns amber and stays put on failure. */
.cortex-prefs-status {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4ab021;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.cortex-prefs-status.is-visible {
  opacity: 1;
}

.cortex-prefs-status.is-error {
  color: #e0a800;
}

/* Native <legend> is a special element that anchors into the fieldset's top
   border; with the border stripped above, normalize it to a plain block label
   for every appearance picker so they all stack the same way. */
.cortex-appearance-field > legend.cortex-appearance-label {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: inherit;
  line-height: inherit;
}

.cortex-scheme-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  position: relative;
  width: 60%;
  min-width: 18rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--cortex-border);
  border-radius: var(--cortex-radius-sm);
  background-color: rgba(133, 153, 169, 0.06);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cortex-scheme-card + .cortex-scheme-card {
  margin-top: 0.5rem;
}

.cortex-scheme-card:hover {
  border-color: var(--cortex-cyan);
}

/* Visually hidden but still focusable, so native radio keyboard nav works. */
.cortex-scheme-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.cortex-scheme-card:has(.cortex-scheme-radio:checked) {
  border-color: var(--cortex-cyan);
  background-color: rgba(133, 153, 169, 0.14);
  box-shadow: var(--cortex-glow);
}

.cortex-scheme-card:has(.cortex-scheme-radio:focus-visible) {
  outline: 2px solid var(--cortex-cyan);
  outline-offset: 2px;
}

.cortex-scheme-swatch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cortex-swatch-square {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(244, 244, 244, 0.25);
}

.cortex-swatch-divider {
  width: 1px;
  align-self: stretch;
  margin: 0 4px;
  background-color: var(--cortex-border);
}

.cortex-scheme-name {
  color: var(--cortex-text);
}

@media (max-width: 768px) {
  .cortex-scheme-card {
    width: 100%;
  }
}

/* ===================================
   Cortex App -- Contact tab
   =================================== */
.cortex-contact-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ===================================
   Cortex App -- FAQ tab
   =================================== */
.cortex-faq-accordion .accordion-item {
  background: rgba(20, 22, 27, 0.35);
  border: 1px solid var(--cortex-border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.cortex-faq-accordion .accordion-button {
  background: transparent;
  color: var(--cortex-text);
  font-family: var(--cortex-font-body);
  font-weight: 500;
  letter-spacing: normal;
}

.cortex-faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(175, 0, 0, 0.06);
  color: var(--cortex-cyan);
  box-shadow: none;
}

.cortex-faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(175, 0, 0, 0.15);
}

.cortex-faq-accordion .accordion-body {
  color: var(--cortex-text-muted);
  font-size: 0.9rem;
  /* Preserve newlines in the seeded Answer text so list-like answers render
     one item per line without us needing HTML/Markdown in the content. */
  white-space: pre-line;
}

/* ===================================
   Cortex App -- "Report your ideas" badge
   Pill-shaped nav entry sitting next to the user burger menu.
   Bootstrap's click toggle still owns keyboard / touch; the
   :hover rule below adds desktop hover-open on top of it.
   =================================== */
.cortex-report-link {
  color: var(--cortex-text) !important;
  font-family: var(--cortex-font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  /*padding: 0.25rem 0.85rem;*/
  margin-right: 0.6rem;
  border-radius: var(--cortex-radius-sm);
  transition: background 0.25s, color 0.25s;
}

.cortex-report-link:hover,
.cortex-report-link:focus,
.cortex-report-link[aria-expanded="true"] {
  color: var(--cortex-cyan) !important;
  background: rgba(43, 212, 212, 0.08);
}

/* "Video-tutorial" navbar badge — same pill as the report link, with a small
   play glyph so it reads as a media shortcut next to "Report your ideas". */
.cortex-video-tutorial-link::before {
  content: "\25B6";
  font-size: 0.7em;
  margin-right: 0.4rem;
  color: var(--cortex-cyan);
}

/* Open the dropdown on hover for desktop only. The (hover: hover) +
   (pointer: fine) guard keeps touch devices on Bootstrap's click
   toggle, where :hover would otherwise be sticky and trap users. */
@media (hover: hover) and (pointer: fine) {
  .cortex-report-dropdown:hover > .dropdown-menu,
  .cortex-user-menu-dropdown:hover > .dropdown-menu,
  .cortex-copy-range-dropdown:not(.is-disabled-root):hover > .dropdown-menu {
    display: block;
  }
}

.cortex-grid-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  /* Lock the row to the same height as the right column's share panel so
     the display-mode + Copy Range buttons sit at the same baseline as the
     Share-this-view button across the layout's centerline. */
  min-height: var(--cortex-display-mode-h);
  /* Breathing room between the toolbar and the grid below. Mirrors the
     gap between the share panel and the action panel on the right column
     (see `.cortex-range-side-column { margin-top }` in layout.css). */
  margin-bottom: 1rem;
}

/* Block hover-to-open + clicks when the trigger is in its disabled
   state. .cortex-display-mode-button[aria-disabled="true"] handles
   the visual dimming; pointer-events removes the interaction so the
   empty dropdown can't unfurl on a fold-only node. */
.cortex-copy-range-toggle[aria-disabled="true"] {
  pointer-events: none;
}

/* Contact tab lives inside .cortex-settings-pane (one of the Settings tabs).
   Vertically center the short form within the tab-content area so it doesn't
   sit awkwardly at the top of a 75vh pane. */
.cortex-settings-tabcontent .cortex-contact-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  max-width: 640px;
}

.cortex-settings-pane .cortex-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cortex-settings-pane .cortex-contact-form > .btn {
  align-self: flex-start;
}

/* ===================================
   Cortex App -- Navbar "Upgrade to Pro" pill badge
   Shown only to Free users (gated in _Layout.cshtml).
   =================================== */
.cortex-upgrade-pill {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  margin-right: 0.5rem;
  border-radius: var(--cortex-radius-sm);
  background: linear-gradient(135deg, var(--cortex-cyan), var(--cortex-blue));
  color: #fff !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}

.cortex-upgrade-pill:hover,
.cortex-upgrade-pill:focus {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(175, 0, 0, 0.25);
  text-decoration: none;
}

.cortex-upgrade-pill:active {
  transform: translateY(0);
}

/* Async payment-failure pill — same shape as the upgrade pill but a danger
   (red) treatment so it reads as "something needs attention", not an upsell. */
.cortex-payment-alert-pill {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  margin-right: 0.5rem;
  border-radius: var(--cortex-radius-sm);
  background: linear-gradient(135deg, #b51221, #e22b3c);
  color: #fff !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}

.cortex-payment-alert-pill:hover,
.cortex-payment-alert-pill:focus {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(226, 43, 60, 0.35);
  text-decoration: none;
}

.cortex-payment-alert-pill:active {
  transform: translateY(0);
}

/* ===================================
   Cortex App -- Keyboard shortcuts tab (two-column reference)
   =================================== */
.cortex-shortcuts-intro {
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.cortex-shortcuts-list {
  margin: 0;
}

.cortex-shortcut-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--cortex-border);
}

.cortex-shortcut-row:last-child {
  border-bottom: none;
}

.cortex-shortcut-meta {
  margin: 0;
  min-width: 0;
}

.cortex-shortcut-name {
  display: block;
  color: var(--cortex-text);
  font-weight: 600;
}

.cortex-shortcut-desc {
  display: block;
  color: var(--cortex-text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.cortex-shortcut-keys {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  white-space: nowrap;
}

.cortex-shortcut-keys kbd {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--cortex-surface);
  border: 1px solid var(--cortex-border);
  border-radius: var(--cortex-radius-sm);
  color: var(--cortex-text);
  font-size: 0.8rem;
  line-height: 1.4;
  box-shadow: 0 1px 0 var(--cortex-border);
}

.cortex-shortcut-plus,
.cortex-shortcut-then {
  color: var(--cortex-text-muted);
  font-size: 0.8rem;
}

.cortex-shortcut-then {
  margin: 0 0.25rem;
  font-style: italic;
}