/* ConnectorX (by fragmentx.ai) — dashboard base. Most styling is applied inline by app.ts
   (ported from the Claude Design mockup); this file holds the reset, animations,
   and the real :hover/:focus rules the mockup expressed via design-tool attrs. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #f5f5f7; }
html[data-theme="dark"] { background: #08080b; }
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app { min-height: 100vh; }

::selection { background: rgba(91, 87, 235, 0.22); }
input::placeholder { color: var(--faint); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }

@keyframes fx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fx-boot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b8b95;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  animation: fx-pulse 1.4s ease-in-out infinite;
}

/* Interactive states (mockup used style-hover / style-focus attributes). */
.fx-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--panel) !important;
}
.fx-otp:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fx-btn-primary:hover { background: var(--accent-press) !important; }
.fx-btn-ghost:hover { color: var(--ink) !important; background: var(--panel-2) !important; }
.fx-btn-soft:hover { filter: brightness(1.06); }
.fx-icon-btn:hover { color: var(--ink) !important; border-color: var(--line-2) !important; }
.fx-nav:hover:not(.fx-nav-on) { background: var(--panel-2) !important; }
.fx-copy:hover { color: var(--accent) !important; }
.fx-copy-dark:hover { background: rgba(255, 255, 255, 0.16) !important; }
.fx-link:hover { color: var(--ink) !important; }
.fx-danger:hover { text-decoration: underline; }
.fx-card { transition: border-color .14s, box-shadow .14s, transform .14s; }
.fx-card-hover:hover { border-color: var(--line-2) !important; transform: translateY(-2px); }
.fx-row-btn:hover { color: var(--ink) !important; }
button:disabled { opacity: 0.6; cursor: default; }