.axis-header { margin: 8px 0 28px; }

.axis-greeting {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.axis-subtitle {
  font-size: 17px;
  color: var(--text-light);
  margin: 0;
}

.axis-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.axis-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 26px 24px 22px;
  border: 1px solid transparent;
  border-radius: 16px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.axis-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
}

.axis-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
}

.axis-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 18px;
}

.axis-card-icon .material-icons { font-size: 28px; }

.axis-card-intention {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.axis-card-caption {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-light);
}

.axis-card-go {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 700;
}

.axis-card-go .material-icons {
  font-size: 18px;
  transition: transform 0.15s ease;
}

.axis-card:hover .axis-card-go .material-icons { transform: translateX(4px); }

.axis-card--indigo { background: var(--tone-indigo-quiet); border-color: var(--tone-indigo-quiet); }
.axis-card--indigo::before { background: var(--tone-indigo); }
.axis-card--indigo .axis-card-icon { background: var(--tone-indigo); color: var(--text-contrast); }
.axis-card--indigo .axis-card-go { color: var(--tone-indigo-ink); }

.axis-card--teal { background: var(--tone-teal-quiet); border-color: var(--tone-teal-quiet); }
.axis-card--teal::before { background: var(--tone-teal); }
.axis-card--teal .axis-card-icon { background: var(--tone-teal); color: var(--text-contrast); }
.axis-card--teal .axis-card-go { color: var(--tone-teal-ink); }

.axis-card--amber { background: var(--tone-amber-quiet); border-color: var(--tone-amber-quiet); }
.axis-card--amber::before { background: var(--tone-amber); }
.axis-card--amber .axis-card-icon { background: var(--tone-amber); color: var(--text-contrast); }
.axis-card--amber .axis-card-go { color: var(--tone-amber-ink); }

.axis-card--rose { background: var(--tone-rose-quiet); border-color: var(--tone-rose-quiet); }
.axis-card--rose::before { background: var(--tone-rose); }
.axis-card--rose .axis-card-icon { background: var(--tone-rose); color: var(--text-contrast); }
.axis-card--rose .axis-card-go { color: var(--tone-rose-ink); }

.axis-card--violet { background: var(--tone-violet-quiet); border-color: var(--tone-violet-quiet); }
.axis-card--violet::before { background: var(--tone-violet); }
.axis-card--violet .axis-card-icon { background: var(--tone-violet); color: var(--text-contrast); }
.axis-card--violet .axis-card-go { color: var(--tone-violet-ink); }

.axis-card--rainbow { background: var(--surface-card); border-color: var(--border-neutral); }
.axis-card--rainbow::before {
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e5a0, #22d3ee, #8b7bff, #ff5f6d);
  background-size: 300% 100%;
  animation: ai-rainbow-text 7s linear infinite;
}
.axis-card--rainbow .axis-card-icon {
  background: linear-gradient(135deg, #ff5f6d, #ffc371, #47e5a0, #22d3ee, #8b7bff);
  color: #ffffff;
}
.axis-card--rainbow .axis-card-go {
  background: linear-gradient(90deg, #ff5f6d, #47e5a0, #22d3ee, #8b7bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.axis-card--rainbow .axis-card-go .material-icons { color: #8b7bff; }

@media (prefers-reduced-motion: reduce) {
  .axis-card--rainbow::before { animation: none; }
}

.axis-card--slate { background: var(--tone-slate-quiet); border-color: var(--tone-slate-quiet); }
.axis-card--slate::before { background: var(--tone-slate); }
.axis-card--slate .axis-card-icon { background: var(--tone-slate); color: var(--text-contrast); }
.axis-card--slate .axis-card-go { color: var(--tone-slate-ink); }

.profile-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.profile-setting { flex-wrap: wrap; }
.profile-setting input,
.profile-setting select { min-width: 0; }

.profile-setting-ack {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  opacity: 0;
  transition: opacity .18s ease-out;
}

.profile-setting-ack.is-visible { opacity: 1; }

.connection-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--surface-sunken);
}

.connection-row:first-of-type { border-top: none; }

.connection-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.connection-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-main); }

.connection-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-light);
}

.connection-badge--on { background: var(--success-quiet); color: var(--success); }

.connection-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--surface-app);
  border: 1px solid var(--border-neutral);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--text-main);
}

.connection-action { flex: 0 0 auto; }

@media (max-width: 640px) {
  .connection-row { flex-wrap: wrap; }
  .connection-action { width: 100%; }
}