@import url("agile-ui/tokens.css");
@import url("agile-ui/portal-theme.css");

@font-face {
  font-family: Mont;
  font-weight: 400;
  font-style: normal;
  src: url("Mont-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Mont;
  font-weight: 600;
  font-style: normal;
  src: url("Mont-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: Mont;
  font-weight: 700;
  font-style: normal;
  src: url("Mont-Bold.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background:
    radial-gradient(ellipse 80% 50% at 100% 0%, color-mix(in srgb, var(--color-primary-highlight) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 100%, color-mix(in srgb, var(--color-danger-text) 6%, transparent), transparent 50%),
    var(--color-bg);
  line-height: var(--line-height-normal);
  min-height: 100vh;
}

.ac-hero {
  background: linear-gradient(165deg, var(--color-midnight-900) 0%, var(--color-midnight-700) 45%, var(--color-midnight-500) 100%);
  color: var(--color-white);
  padding: 1.25rem 1.25rem 1.5rem;
}

.ac-hero-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.ac-hero-logo-link {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.ac-hero-logo-link:hover {
  opacity: 0.88;
}

.ac-hero-logo {
  height: 32px;
  width: auto;
  display: block;
}

.ac-hero-title {
  flex: 1 1 12rem;
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.ac-hero-title span { color: var(--color-primary-highlight); }

.ac-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.ac-accent-bar {
  height: var(--border-lg);
  background: linear-gradient(90deg, var(--color-red-700) 0 28%, var(--color-blue-500) 28% 100%);
}

.ac-main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.ac-btn {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ac-btn:focus-visible {
  outline: var(--border-md) solid var(--color-primary-highlight);
  outline-offset: var(--space-2xs);
}

.ac-btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.ac-btn-primary:hover { background: var(--color-primary-highlight); }

.ac-btn-danger {
  background: var(--color-red-700);
  color: var(--color-white);
}
.ac-btn-danger:hover { background: var(--color-red-900); }

.ac-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-slate-300);
  border: var(--border-sm) solid rgba(255, 255, 255, 0.15);
}
.ac-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}

.ac-btn-outline {
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  border: var(--border-sm) solid var(--color-border);
}
.ac-btn-outline:hover {
  border-color: var(--color-primary-highlight);
  color: var(--color-primary);
}

.ac-user-chip {
  font-size: 0.82rem;
  color: var(--color-slate-300);
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  border: var(--border-sm) solid rgba(255, 255, 255, 0.1);
}

.ac-user-chip strong {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.ac-user-chip code {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-xs);
}

.ac-session-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  padding: 0.65rem 0.85rem;
  margin: 0 0 1rem;
  background: var(--color-bg);
  border: var(--border-sm) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.ac-session-bar strong {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.ac-session-bar code {
  font-family: var(--font-family-mono);
  font-size: 0.82rem;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-highlight) 12%, transparent);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-xs);
}

.ac-note, .ac-warn, .ac-error {
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  border-left: var(--border-lg) solid;
  font-size: 0.92rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ac-note {
  background: var(--color-info-surface-subtle);
  border-color: var(--color-info-text);
  color: var(--color-text);
}

.ac-warn {
  background: var(--color-danger-surface-subtle);
  border-color: var(--color-danger-text);
  color: var(--color-text);
}

.ac-error {
  background: var(--color-danger-surface-subtle);
  border-color: var(--color-danger-text);
  color: var(--color-red-900);
}

.ac-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-dimmed);
}

.ac-spinner {
  width: 2rem;
  height: 2rem;
  border: var(--border-lg) solid var(--color-border);
  border-top-color: var(--color-primary-highlight);
  border-radius: var(--radius-full);
  animation: ac-spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes ac-spin {
  to { transform: rotate(360deg); }
}