/* ===== Section heading ===== */
.section { padding-bottom: var(--space-8); }
.section + .section { padding-top: var(--space-2); border-top: 1px solid var(--border); margin-top: var(--space-2); }
.section.hidden { display: none; }

.section-head { margin-bottom: var(--space-5); padding-top: var(--space-3); }
.section-head h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.section-head h2 .section-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.section-intro {
  color: var(--fg-muted);
  font-size: 0.95rem;
  max-width: 60ch;
}

/* ===== Shortcut card ===== */
.cards { display: flex; flex-direction: column; gap: var(--space-3); }

.card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
  position: relative;
  scroll-margin-top: 80px;
}
.card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.card.hidden { display: none; }
.card.flash { animation: flash 1.4s ease-out 1; }
@keyframes flash {
  0%, 30% { background: var(--accent-soft); border-color: var(--accent); }
  100% { background: var(--bg-card); }
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
  flex-wrap: wrap;
}

.card-keys {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  cursor: pointer;
  margin: -2px 0;
  align-self: flex-start;
}
.card-keys:hover kbd { border-color: var(--accent); color: var(--accent); }

.card-desc {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--fg-muted);
}

.card-windows {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--fg-subtle);
  padding-top: 2px;
}
.card-windows-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.card-windows-text { color: var(--fg-muted); }

.card-tip {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-top: 2px;
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--fg);
}
.card-tip-icon { flex-shrink: 0; opacity: 0.85; color: var(--accent); }

.card-copy {
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--fg-subtle);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.card:hover .card-copy { opacity: 1; }
.card-copy:hover, .card-copy:focus-visible { background: var(--bg-elevated); color: var(--fg); opacity: 1; }

/* ===== kbd component ===== */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--kbd-fg);
  line-height: 1;
  transition: border-color var(--transition), color var(--transition);
}
.kbd-plus { color: var(--fg-subtle); font-weight: 500; padding: 0 2px; user-select: none; }

/* ===== Cmd+K Palette ===== */
.palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.palette[hidden] { display: none; }
.palette-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.palette-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: palette-in 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes palette-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.palette-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
}
.palette-input-row svg { flex-shrink: 0; }
.palette-input-row input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--fg);
  outline: none;
}
.palette-input-row input::placeholder { color: var(--fg-subtle); }
.palette-esc {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 3px 6px;
  border-bottom-width: 1px;
}

.palette-results {
  max-height: 340px;
  overflow-y: auto;
  padding: var(--space-2);
}
.palette-results:empty::before {
  content: "Không tìm thấy phím tắt phù hợp.";
  display: block;
  padding: var(--space-5);
  text-align: center;
  color: var(--fg-subtle);
  font-size: 0.9rem;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
}
.palette-item.active { background: var(--bg-card-hover); }
.palette-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.palette-item-name { font-size: 0.92rem; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item-meta { font-size: 0.75rem; color: var(--fg-subtle); }
.palette-item-meta mark { background: var(--accent-soft); color: var(--accent); padding: 0 2px; border-radius: 3px; }
.palette-item-name mark { background: var(--accent-soft); color: var(--accent); padding: 0 2px; border-radius: 3px; }
.palette-item-keys { display: flex; gap: 3px; flex-shrink: 0; }
.palette-item-keys kbd { font-size: 0.7rem; min-width: 22px; height: 22px; padding: 0 6px; }

.palette-foot {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--fg-subtle);
}
.palette-foot kbd {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-right: 4px;
  border-bottom-width: 1px;
}

/* ===== Toast ===== */
.toast-stack {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 0.86rem;
  color: var(--fg);
  animation: toast-in 200ms cubic-bezier(0.2, 0, 0.2, 1);
  min-width: 200px;
}
.toast.leaving { animation: toast-out 240ms cubic-bezier(0.2, 0, 0.2, 1) forwards; }
.toast-icon { color: var(--accent); flex-shrink: 0; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px); }
}

/* ===== Empty state when no search results ===== */
.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--fg-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.empty-state strong { color: var(--fg); display: block; margin-bottom: 4px; }
.empty-state.hidden { display: none; }