@layer components {
  .cmd-palette-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 10003; justify-content: center; padding-top: 20vh;

    &.open { display: flex; }
  }

  .cmd-palette {
    background: #0a0a0a; border: 1px solid var(--acid-20); width: 500px; max-height: 400px; overflow-y: auto;

    & input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--acid-10); color: var(--acid); font-family: var(--font-mono); font-size: 14px; padding: var(--sp-3) var(--sp-4); outline: none; }
  }

  .cmd-palette-item {
    padding: var(--sp-2) var(--sp-4); cursor: pointer; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono);

    &:hover, &.selected { background: var(--acid-8); color: var(--acid); }
  }

  .clock { position: fixed; bottom: 16px; right: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); z-index: 100; }

  .clock-lang {
    color: var(--acid-40); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s;

    &:hover { color: var(--acid); }
  }
}