# AmroUI Foundation

Shared AmroUI primitives, design tokens, and component styling.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-foundation.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-foundation.json)

## Source

### source/components/amro-ui-logo.tsx

```tsx
import { useId, type SVGProps } from "react";

export interface AmroUILogoProps extends Omit<SVGProps<SVGSVGElement>, "color"> {
  variant?: "dark" | "light";
  mode?: "full" | "mark";
  title?: string;
}

function Mark({ gradientId }: { gradientId: string }) {
  return (
    <g>
      <path
        fill={`url(#${gradientId})`}
        d="M16 130 80 17c3-6 8-9 15-9h31c8 0 12 9 8 16l-22 38H92L65 111c-6 10-15 16-27 19l-16 4c-5 1-9-1-6-4Z"
      />
      <path
        fill={`url(#${gradientId})`}
        d="m142 45 45 82c3 6 0 10-6 8l-25-7c-12-3-21-9-27-19l-17-29H88l13-23h22l11-19c2-4 6-4 8 0v7Z"
      />
    </g>
  );
}

export function AmroUILogo({
  variant = "dark",
  mode = "full",
  title = "AmroUI",
  ...props
}: AmroUILogoProps) {
  const id = useId().replace(/:/g, "");
  const gradientId = `amro-gradient-${id}`;
  const wordmark = variant === "dark" ? "var(--amro-foreground)" : "var(--amro-foreground)";

  if (mode === "mark") {
    return (
      <svg viewBox="0 0 200 150" role="img" aria-label={title} {...props}>
        <defs>
          <linearGradient
            id={gradientId}
            x1="48"
            y1="18"
            x2="151"
            y2="133"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="var(--amro-accent-teal)" />
            <stop offset="1" stopColor="var(--amro-accent-cyan)" />
          </linearGradient>
        </defs>
        <Mark gradientId={gradientId} />
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 360 238" role="img" aria-label={title} {...props}>
      <defs>
        <linearGradient
          id={gradientId}
          x1="92"
          y1="14"
          x2="230"
          y2="165"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="var(--amro-accent-teal)" />
          <stop offset="1" stopColor="var(--amro-accent-cyan)" />
        </linearGradient>
      </defs>
      <g transform="translate(80 0)">
        <Mark gradientId={gradientId} />
      </g>
      <text
        x="20"
        y="198"
        fill={wordmark}
        fontFamily="Inter, Arial, sans-serif"
        fontSize="58"
        fontWeight="700"
        letterSpacing="5"
      >
        AMRO
      </text>
      <text
        x="248"
        y="198"
        fill={`url(#${gradientId})`}
        fontFamily="Inter, Arial, sans-serif"
        fontSize="58"
        fontWeight="700"
        letterSpacing="5"
      >
        UI
      </text>
      <text
        x="54"
        y="230"
        fill="var(--amro-foreground-muted)"
        fontFamily="Inter, Arial, sans-serif"
        fontSize="13"
        fontWeight="560"
        letterSpacing="9"
      >
        AI UI PLATFORM
      </text>
    </svg>
  );
}
```


### source/components/avatar.tsx

```tsx
import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
  name: string;
  src?: string;
  imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">;
}

function initials(name: string) {
  return name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("");
}

export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
  ({ className, name, src, imageProps, ...props }, ref) => (
    <span
      ref={ref}
      className={cn("amro-avatar", className)}
      aria-label={name}
      role="img"
      {...props}
    >
      {src ? (
        <img src={src} alt="" {...imageProps} />
      ) : (
        <span aria-hidden="true">{initials(name)}</span>
      )}
    </span>
  )
);
Avatar.displayName = "Avatar";
```


### source/components/badge.tsx

```tsx
import { cva, type VariantProps } from "class-variance-authority";
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

const badgeVariants = cva("amro-badge", {
  variants: {
    tone: {
      neutral: "amro-badge--neutral",
      success: "amro-badge--success",
      info: "amro-badge--info"
    }
  },
  defaultVariants: { tone: "neutral" }
});

export interface BadgeProps
  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
  dot?: boolean;
}

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, tone, dot = false, children, ...props }, ref) => (
    <span ref={ref} className={cn(badgeVariants({ tone }), className)} {...props}>
      {dot ? <span className="amro-badge__dot" aria-hidden="true" /> : null}
      {children}
    </span>
  )
);
Badge.displayName = "Badge";

export const StatusPill = Badge;
export type StatusPillProps = BadgeProps;
```


### source/components/button.tsx

```tsx
import { cva, type VariantProps } from "class-variance-authority";
import { forwardRef, type ButtonHTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

const buttonVariants = cva("amro-button", {
  variants: {
    variant: {
      primary: "amro-button--primary",
      secondary: "amro-button--secondary",
      tertiary: "amro-button--tertiary"
    },
    size: {
      sm: "amro-button--sm",
      md: "amro-button--md",
      lg: "amro-button--lg"
    }
  },
  defaultVariants: { variant: "primary", size: "md" }
});

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, type = "button", ...props }, ref) => (
    <button
      ref={ref}
      type={type}
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
);
Button.displayName = "Button";
```


### source/components/card.tsx

```tsx
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  elevated?: boolean;
}

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, elevated = false, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("amro-card", elevated && "amro-card--elevated", className)}
      {...props}
    />
  )
);
Card.displayName = "Card";
```


### source/components/divider.tsx

```tsx
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
  orientation?: "horizontal" | "vertical";
}

export const Divider = forwardRef<HTMLHRElement, DividerProps>(
  ({ className, orientation = "horizontal", ...props }, ref) => (
    <hr
      ref={ref}
      className={cn("amro-divider", `amro-divider--${orientation}`, className)}
      aria-orientation={orientation}
      {...props}
    />
  )
);
Divider.displayName = "Divider";
```


### source/components/feature-primitives.tsx

```tsx
import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "../lib/cn.js";
import { Badge, type BadgeProps } from "./badge.js";
import { Card, type CardProps } from "./card.js";

export type AmroAsyncStatus = "idle" | "loading" | "success" | "error" | "empty";
export type AmroProcessStatus = "pending" | "active" | "complete" | "blocked" | "error";

export interface FeaturePanelProps extends Omit<CardProps, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  eyebrow?: ReactNode;
  status?: ReactNode;
  actions?: ReactNode;
  footer?: ReactNode;
}

export const FeaturePanel = forwardRef<HTMLDivElement, FeaturePanelProps>(
  (
    { actions, children, className, description, eyebrow, footer, status, title, ...props },
    ref
  ) => (
    <Card ref={ref} className={cn("amro-feature-panel", className)} {...props}>
      {(eyebrow !== undefined || title !== undefined || actions !== undefined) && (
        <header className="amro-feature-panel__header">
          <div className="amro-feature-panel__heading">
            {eyebrow !== undefined && <span className="amro-eyebrow">{eyebrow}</span>}
            {title !== undefined && <strong className="amro-feature-panel__title">{title}</strong>}
            {description !== undefined && (
              <span className="amro-feature-panel__description">{description}</span>
            )}
          </div>
          {status !== undefined && <div className="amro-feature-panel__status">{status}</div>}
          {actions !== undefined && <div className="amro-feature-panel__actions">{actions}</div>}
        </header>
      )}
      <div className="amro-feature-panel__body">{children}</div>
      {footer !== undefined && <footer className="amro-feature-panel__footer">{footer}</footer>}
    </Card>
  )
);
FeaturePanel.displayName = "FeaturePanel";

export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
  status: AmroProcessStatus | AmroAsyncStatus | "online" | "offline" | "warning";
  label?: ReactNode;
}

const statusTone: Record<StatusIndicatorProps["status"], NonNullable<BadgeProps["tone"]>> = {
  active: "info",
  blocked: "info",
  complete: "success",
  empty: "neutral",
  error: "neutral",
  idle: "neutral",
  loading: "info",
  offline: "neutral",
  online: "success",
  pending: "neutral",
  success: "success",
  warning: "info"
};

export const StatusIndicator = forwardRef<HTMLSpanElement, StatusIndicatorProps>(
  ({ className, label, status, ...props }, ref) => (
    <Badge
      ref={ref}
      className={cn("amro-status-indicator", `amro-status-indicator--${status}`, className)}
      dot
      tone={statusTone[status]}
      {...props}
    >
      {label ?? status}
    </Badge>
  )
);
StatusIndicator.displayName = "StatusIndicator";

export interface MetricItem {
  id: string;
  label: ReactNode;
  value: ReactNode;
  detail?: ReactNode;
}

export interface MetricGridProps extends HTMLAttributes<HTMLDListElement> {
  items: readonly MetricItem[];
  emptyLabel?: ReactNode;
}

export const MetricGrid = forwardRef<HTMLDListElement, MetricGridProps>(
  ({ className, emptyLabel = "No metrics yet", items, ...props }, ref) => (
    <dl ref={ref} className={cn("amro-metric-grid", className)} {...props}>
      {items.length === 0 ? (
        <div className="amro-empty-inline">{emptyLabel}</div>
      ) : (
        items.map((item) => (
          <div className="amro-metric" key={item.id}>
            <dt>{item.label}</dt>
            <dd>{item.value}</dd>
            {item.detail !== undefined && <small>{item.detail}</small>}
          </div>
        ))
      )}
    </dl>
  )
);
MetricGrid.displayName = "MetricGrid";

export interface ActionItem {
  id: string;
  label: ReactNode;
  onSelect?: () => void;
  disabled?: boolean;
  tone?: "primary" | "secondary" | "danger";
}

export interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {
  actions: readonly ActionItem[];
}

export const ActionRow = forwardRef<HTMLDivElement, ActionRowProps>(
  ({ actions, className, ...props }, ref) => (
    <div ref={ref} className={cn("amro-action-row", className)} {...props}>
      {actions.map((action) => (
        <button
          className={cn("amro-inline-action", `amro-inline-action--${action.tone ?? "secondary"}`)}
          disabled={action.disabled}
          key={action.id}
          onClick={action.onSelect}
          type="button"
        >
          {action.label}
        </button>
      ))}
    </div>
  )
);
ActionRow.displayName = "ActionRow";

export interface EmptyNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  action?: ReactNode;
}

export const EmptyNotice = forwardRef<HTMLDivElement, EmptyNoticeProps>(
  ({ action, className, description, title = "Nothing here yet", ...props }, ref) => (
    <div ref={ref} className={cn("amro-empty-notice", className)} {...props}>
      <strong>{title}</strong>
      {description !== undefined && <span>{description}</span>}
      {action !== undefined && <div>{action}</div>}
    </div>
  )
);
EmptyNotice.displayName = "EmptyNotice";
```


### source/components/input.tsx

```tsx
import { CalendarDays, ChevronDown, Clock3 } from "lucide-react";
import {
  forwardRef,
  useId,
  type InputHTMLAttributes,
  type ReactNode,
  type SelectHTMLAttributes,
  type TextareaHTMLAttributes
} from "react";
import { cn } from "../lib/cn.js";

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: ReactNode;
  hint?: ReactNode;
  error?: ReactNode;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  (
    { className, id: providedId, label, hint, error, "aria-describedby": describedBy, ...props },
    ref
  ) => {
    const generatedId = useId();
    const id = providedId ?? generatedId;
    const messageId = `${id}-message`;

    return (
      <label className="amro-field" htmlFor={id}>
        {label ? <span className="amro-field__label">{label}</span> : null}
        <input
          ref={ref}
          id={id}
          className={cn("amro-input", className)}
          aria-invalid={error ? true : undefined}
          aria-describedby={error || hint ? messageId : describedBy}
          {...props}
        />
        {error || hint ? (
          <span
            id={messageId}
            className={cn("amro-field__message", error && "amro-field__message--error")}
          >
            {error ?? hint}
          </span>
        ) : null}
      </label>
    );
  }
);
Input.displayName = "Input";

export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  wrapperClassName?: string;
}

export const Select = forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, wrapperClassName, children, ...props }, ref) => (
    <span className={cn("amro-select", wrapperClassName)}>
      <select ref={ref} className={cn("amro-select__control", className)} {...props}>
        {children}
      </select>
      <ChevronDown aria-hidden="true" />
    </span>
  )
);
Select.displayName = "Select";

export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => (
    <textarea ref={ref} className={cn("amro-textarea", className)} {...props} />
  )
);
Textarea.displayName = "Textarea";

export type DateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
  ({ className, ...props }, ref) => (
    <span className="amro-date-control">
      <CalendarDays aria-hidden="true" />
      <input ref={ref} className={cn("amro-input", className)} type="date" {...props} />
    </span>
  )
);
DateInput.displayName = "DateInput";

export type TimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
  ({ className, ...props }, ref) => (
    <span className="amro-time-control">
      <Clock3 aria-hidden="true" />
      <input ref={ref} className={cn("amro-input", className)} type="time" {...props} />
    </span>
  )
);
TimeInput.displayName = "TimeInput";

export type RangeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(
  ({ className, ...props }, ref) => (
    <input ref={ref} className={cn("amro-range-input", className)} type="range" {...props} />
  )
);
RangeInput.displayName = "RangeInput";
```


### source/components/skeleton.tsx

```tsx
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  label?: string;
}

export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, label = "Loading", ...props }, ref) => (
    <div
      ref={ref}
      className={cn("amro-skeleton", className)}
      role="status"
      aria-label={label}
      {...props}
    >
      <span className="amro-visually-hidden">{label}</span>
    </div>
  )
);
Skeleton.displayName = "Skeleton";
```


### source/components/theme-segmented-toggle.tsx

```tsx
import { Moon, Sun } from "lucide-react";
import { useEffect, useState, type HTMLAttributes } from "react";
import type { AmroTheme } from "@amro-ui/tokens";
import { cn } from "../lib/cn.js";

const STORAGE_KEY = "amro-ui-theme";

function systemTheme(): AmroTheme {
  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
}

function savedTheme(): AmroTheme | null {
  const value = window.localStorage.getItem(STORAGE_KEY);
  return value === "light" || value === "dark" ? value : null;
}

function applyTheme(theme: AmroTheme) {
  document.documentElement.dataset.theme = theme;
}

export interface ThemeSegmentedToggleProps extends HTMLAttributes<HTMLDivElement> {
  onThemeChange?: (theme: AmroTheme) => void;
}

export function ThemeSegmentedToggle({
  className,
  onThemeChange,
  ...props
}: ThemeSegmentedToggleProps) {
  const [theme, setTheme] = useState<AmroTheme>(() =>
    typeof window === "undefined" ? "dark" : (savedTheme() ?? systemTheme())
  );

  useEffect(() => {
    applyTheme(theme);
  }, [theme]);

  useEffect(() => {
    if (savedTheme()) return;
    const media = window.matchMedia("(prefers-color-scheme: light)");
    const listener = () => setTheme(media.matches ? "light" : "dark");
    media.addEventListener("change", listener);
    return () => media.removeEventListener("change", listener);
  }, []);

  const choose = (nextTheme: AmroTheme) => {
    setTheme(nextTheme);
    applyTheme(nextTheme);
    window.localStorage.setItem(STORAGE_KEY, nextTheme);
    onThemeChange?.(nextTheme);
  };

  return (
    <div
      className={cn("amro-theme-toggle", className)}
      role="group"
      aria-label="Color theme"
      {...props}
    >
      <button
        type="button"
        className="amro-theme-toggle__option"
        aria-label="Use light theme"
        aria-pressed={theme === "light"}
        onClick={() => choose("light")}
      >
        <Sun aria-hidden="true" size={16} strokeWidth={1.8} />
      </button>
      <button
        type="button"
        className="amro-theme-toggle__option"
        aria-label="Use dark theme"
        aria-pressed={theme === "dark"}
        onClick={() => choose("dark")}
      >
        <Moon aria-hidden="true" size={16} strokeWidth={1.8} />
      </button>
    </div>
  );
}
```


### source/components/tooltip.tsx

```tsx
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import type { ComponentProps, ReactNode } from "react";
import { cn } from "../lib/cn.js";

export interface TooltipProps {
  children: ReactNode;
  content: ReactNode;
  side?: ComponentProps<typeof TooltipPrimitive.Content>["side"];
  delayDuration?: number;
}

export function Tooltip({ children, content, side = "top", delayDuration = 300 }: TooltipProps) {
  return (
    <TooltipPrimitive.Provider delayDuration={delayDuration}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
        <TooltipPrimitive.Portal>
          <TooltipPrimitive.Content className={cn("amro-tooltip")} side={side} sideOffset={8}>
            {content}
            <TooltipPrimitive.Arrow className="amro-tooltip__arrow" />
          </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
}
```


### source/lib/cn.ts

```ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```


### source/amro-ui.css

```css
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --amro-background: #0b1118;
  --amro-surface: #111a24;
  --amro-surface-strong: #667a96;
  --amro-foreground: #d8e1ec;
  --amro-foreground-muted: #667a96;
  --amro-border: #667a96;
  --amro-accent-teal: #20c8c3;
  --amro-accent-cyan: #35b8f2;
  --amro-on-accent: #0b1118;
  --amro-status-success: #20c8c3;
  --amro-status-warning: #35b8f2;
  --amro-status-danger: #d8e1ec;
  --amro-focus: #35b8f2;
}

[data-theme="light"] {
  color-scheme: light;
  --amro-background: #ffffff;
  --amro-surface: #f6f8fb;
  --amro-surface-strong: #e7eef5;
  --amro-foreground: #0b1118;
  --amro-foreground-muted: #64748b;
  --amro-border: #e7eef5;
  --amro-accent-teal: #17b8a8;
  --amro-accent-cyan: #169fe8;
  --amro-on-accent: #0b1118;
  --amro-status-success: #17b8a8;
  --amro-status-warning: #169fe8;
  --amro-status-danger: #64748b;
  --amro-focus: #169fe8;
}

:root {
  --amro-space-0: 0px;
  --amro-space-1: 4px;
  --amro-space-2: 8px;
  --amro-space-3: 12px;
  --amro-space-4: 16px;
  --amro-space-5: 20px;
  --amro-space-6: 24px;
  --amro-space-8: 32px;
  --amro-space-10: 40px;
  --amro-space-12: 48px;
  --amro-space-16: 64px;
  --amro-space-20: 80px;
  --amro-space-24: 96px;

  --amro-radius-control-sm: 8px;
  --amro-radius-control: 10px;
  --amro-radius-control-lg: 12px;
  --amro-radius-card: 18px;
  --amro-radius-card-lg: 24px;
  --amro-radius-full: 9999px;

  --amro-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
  --amro-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
  --amro-font-body: 450;
  --amro-font-medium: 560;
  --amro-font-strong: 650;
  --amro-font-display: 740;
  --amro-text-xs: 0.75rem;
  --amro-text-sm: 0.875rem;
  --amro-text-md: 1rem;
  --amro-text-lg: 1.125rem;
  --amro-text-xl: 1.25rem;
  --amro-text-display-sm: 2rem;
  --amro-text-display: 3rem;
  --amro-leading-tight: 1.1;
  --amro-leading-snug: 1.3;
  --amro-leading-body: 1.55;

  --amro-shadow-card: 0 16px 48px rgb(0 0 0 / 0.14);
  --amro-shadow-control: 0 8px 20px rgb(0 0 0 / 0.12);
  --amro-glow-active-ai:
    0 0 0 1px color-mix(in srgb, var(--amro-accent-teal) 42%, transparent),
    0 0 28px color-mix(in srgb, var(--amro-accent-cyan) 26%, transparent);

  --amro-duration-instant: 100ms;
  --amro-duration-state: 180ms;
  --amro-duration-enter: 240ms;
  --amro-duration-progress: 600ms;
  --amro-duration-pulse: 1600ms;
  --amro-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --amro-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --amro-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --amro-duration-state: 1ms;
    --amro-duration-enter: 1ms;
    --amro-duration-progress: 1ms;
    --amro-duration-pulse: 1ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.amro-button,
.amro-input,
.amro-select__control,
.amro-textarea,
.amro-range-input,
.amro-theme-toggle__option {
  font: inherit;
}

.amro-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--amro-space-2);
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-5);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-strong);
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--amro-duration-state) var(--amro-ease-standard),
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    background var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.amro-button:active:not(:disabled) {
  transform: translateY(0);
}

.amro-button:focus-visible,
.amro-input:focus-visible,
.amro-select__control:focus-visible,
.amro-textarea:focus-visible,
.amro-range-input:focus-visible,
.amro-theme-toggle__option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.amro-button--primary {
  color: var(--amro-on-accent);
  background: linear-gradient(120deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}

.amro-button--secondary {
  border-color: color-mix(in srgb, var(--amro-border) 64%, transparent);
  background: color-mix(in srgb, var(--amro-surface) 68%, transparent);
}

.amro-button--secondary:hover:not(:disabled) {
  border-color: var(--amro-accent-teal);
  background: var(--amro-surface);
}

.amro-button--tertiary {
  color: var(--amro-accent-cyan);
  background: transparent;
}

.amro-button--tertiary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}

.amro-button--sm {
  min-height: 34px;
  padding-inline: var(--amro-space-3);
  font-size: var(--amro-text-xs);
}

.amro-button--lg {
  min-height: 50px;
  padding-inline: var(--amro-space-6);
  border-radius: var(--amro-radius-control-lg);
  font-size: var(--amro-text-md);
}

.amro-card {
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-6);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}

.amro-card--elevated {
  border-radius: var(--amro-radius-card-lg);
  box-shadow: var(--amro-shadow-card);
}

.amro-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  width: fit-content;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--amro-radius-full);
  padding: 0 var(--amro-space-3);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-medium);
  letter-spacing: 0.01em;
}

.amro-badge--neutral {
  color: var(--amro-foreground-muted);
  background: color-mix(in srgb, var(--amro-foreground-muted) 9%, transparent);
}

.amro-badge--success {
  color: var(--amro-status-success);
  background: color-mix(in srgb, var(--amro-status-success) 10%, transparent);
}

.amro-badge--info {
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 10%, transparent);
}

.amro-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--amro-radius-full);
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.amro-field {
  display: grid;
  gap: var(--amro-space-2);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-field__label {
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}

.amro-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-4);
  color: var(--amro-foreground);
  caret-color: var(--amro-accent-teal);
  background: var(--amro-background);
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-input::placeholder {
  color: var(--amro-foreground-muted);
}

.amro-input:hover {
  border-color: var(--amro-accent-teal);
}

.amro-input[aria-invalid="true"] {
  border-color: var(--amro-status-danger);
}

.amro-select,
.amro-date-control,
.amro-time-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-select__control {
  width: 100%;
  min-height: 44px;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0 calc(var(--amro-space-6) + var(--amro-space-3)) 0 var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-background);
  cursor: pointer;
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-select__control:hover,
.amro-select__control:focus-visible,
.amro-textarea:hover,
.amro-textarea:focus-visible {
  border-color: var(--amro-accent-teal);
}

.amro-select > svg {
  position: absolute;
  right: var(--amro-space-3);
  width: 16px;
  height: 16px;
  color: var(--amro-accent-cyan);
  pointer-events: none;
}

.amro-textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: var(--amro-foreground);
  caret-color: var(--amro-accent-teal);
  background: var(--amro-background);
  line-height: var(--amro-leading-body);
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-textarea::placeholder {
  color: var(--amro-foreground-muted);
}

.amro-date-control,
.amro-time-control {
  width: 100%;
}

.amro-date-control > svg,
.amro-time-control > svg {
  position: absolute;
  left: var(--amro-space-3);
  z-index: 1;
  width: 17px;
  height: 17px;
  color: var(--amro-accent-cyan);
  pointer-events: none;
}

.amro-date-control > .amro-input,
.amro-time-control > .amro-input {
  padding-left: calc(var(--amro-space-6) + var(--amro-space-2));
  color-scheme: dark;
}

[data-theme="light"] .amro-date-control > .amro-input,
[data-theme="light"] .amro-time-control > .amro-input {
  color-scheme: light;
}

.amro-range-input {
  width: 100%;
  height: 6px;
  appearance: none;
  border-radius: var(--amro-radius-full);
  accent-color: var(--amro-accent-teal);
  background: linear-gradient(90deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  cursor: pointer;
}

.amro-range-input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  appearance: none;
  border: 3px solid var(--amro-background);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
  box-shadow:
    0 0 0 1px var(--amro-accent-teal),
    var(--amro-glow-active-ai);
}

.amro-range-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--amro-background);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
  box-shadow:
    0 0 0 1px var(--amro-accent-teal),
    var(--amro-glow-active-ai);
}

.amro-field__message {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-field__message--error {
  color: var(--amro-status-danger);
}

.amro-avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 48%, var(--amro-border));
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-strong);
}

.amro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amro-tooltip {
  z-index: 50;
  max-width: 260px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-control);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
  line-height: var(--amro-leading-body);
  animation: amro-tooltip-in var(--amro-duration-enter) var(--amro-ease-enter);
}

.amro-tooltip__arrow {
  fill: var(--amro-surface);
}

.amro-divider {
  flex: none;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--amro-border) 48%, transparent);
}

.amro-divider--horizontal {
  width: 100%;
  height: 1px;
}

.amro-divider--vertical {
  align-self: stretch;
  width: 1px;
  min-height: 24px;
}

.amro-skeleton {
  min-height: 16px;
  overflow: hidden;
  border-radius: var(--amro-radius-control-sm);
  background: var(--amro-surface-strong);
  position: relative;
}

.amro-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--amro-foreground) 11%, transparent),
    transparent
  );
  transform: translateX(-100%);
  animation: amro-skeleton-progress var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}

.amro-theme-toggle {
  display: inline-flex;
  gap: var(--amro-space-1);
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-1);
  background: var(--amro-surface);
}

.amro-theme-toggle__option {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: var(--amro-radius-control-sm);
  color: var(--amro-foreground-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--amro-duration-state) var(--amro-ease-standard),
    background var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-theme-toggle__option[aria-pressed="true"] {
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.amro-feature-panel {
  display: grid;
  gap: var(--amro-space-5);
  min-width: 0;
}

.amro-feature-panel__header {
  display: flex;
  align-items: flex-start;
  gap: var(--amro-space-3);
}

.amro-feature-panel__heading {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
  min-width: 0;
}

.amro-eyebrow {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amro-feature-panel__title {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-lg);
}

.amro-feature-panel__description {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
  line-height: var(--amro-leading-body);
}

.amro-feature-panel__status,
.amro-feature-panel__actions,
.amro-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-feature-panel__body {
  min-width: 0;
}

.amro-feature-panel__footer {
  border-top: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  padding-top: var(--amro-space-4);
}

.amro-status-indicator {
  text-transform: capitalize;
}

.amro-status-indicator--error {
  color: var(--amro-status-danger);
  background: color-mix(in srgb, var(--amro-status-danger) 10%, transparent);
}

.amro-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--amro-space-3);
  margin: 0;
}

.amro-metric {
  display: grid;
  gap: var(--amro-space-1);
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: color-mix(in srgb, var(--amro-background) 62%, transparent);
}

.amro-metric dt,
.amro-metric small {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
}

.amro-metric dd {
  margin: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--amro-font-strong);
}

.amro-inline-action {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font: inherit;
  font-size: var(--amro-text-sm);
  cursor: pointer;
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    background var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-inline-action:hover:not(:disabled),
.amro-inline-action:focus-visible {
  border-color: var(--amro-accent-cyan);
}

.amro-inline-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-inline-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.amro-inline-action--primary {
  border-color: transparent;
  color: var(--amro-on-accent);
  background: linear-gradient(120deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-inline-action--danger {
  border-color: color-mix(in srgb, var(--amro-status-danger) 52%, transparent);
  color: var(--amro-status-danger);
}

.amro-empty-inline,
.amro-empty-notice {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
}

.amro-empty-notice {
  display: grid;
  place-items: center;
  gap: var(--amro-space-2);
  min-height: 132px;
  border: 1px dashed color-mix(in srgb, var(--amro-border) 52%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  text-align: center;
}

.amro-empty-notice strong {
  color: var(--amro-foreground);
}

.amro-product-surface {
  width: min(100%, 680px);
}

.amro-product-surface__content {
  display: grid;
  gap: var(--amro-space-4);
}

.amro-product-surface__progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--amro-radius-full);
  background: color-mix(in srgb, var(--amro-border) 24%, transparent);
}

.amro-product-surface__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  transition: width var(--amro-duration-progress) var(--amro-ease-standard);
}

.amro-product-surface__items {
  display: grid;
  gap: var(--amro-space-2);
}

.amro-product-surface__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  min-height: 54px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-background) 58%, transparent);
  font: inherit;
  text-align: left;
}

.amro-product-surface__item:not(:disabled) {
  cursor: pointer;
}

.amro-product-surface__item:not(:disabled):hover,
.amro-product-surface__item:not(:disabled):focus-visible {
  border-color: var(--amro-accent-cyan);
}

.amro-product-surface__item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-product-surface__item > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-product-surface__item small,
.amro-product-surface__item em {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  font-style: normal;
}

.amro-product-surface__item b {
  font-family: var(--amro-font-mono);
  font-variant-numeric: tabular-nums;
}

.amro-icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 48%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0;
  color: var(--amro-foreground-muted);
  background: transparent;
  cursor: pointer;
}

.amro-icon-button:hover,
.amro-icon-button:focus-visible {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-foreground);
}

.amro-icon-button:focus-visible,
.amro-command-trigger:focus-visible,
.amro-launcher:focus-visible,
.amro-prompt-card:focus-visible,
.amro-mode-bar__option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-icon-button svg {
  width: 18px;
  height: 18px;
}

.amro-icon-button--danger {
  border-color: color-mix(in srgb, var(--amro-status-danger) 48%, transparent);
  color: var(--amro-status-danger);
}

.amro-presence-orb {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  position: relative;
}

.amro-presence-orb--sm {
  width: 38px;
  height: 38px;
}

.amro-presence-orb--lg {
  width: 86px;
  height: 86px;
}

.amro-presence-orb__core,
.amro-presence-orb__ring {
  position: absolute;
  border-radius: var(--amro-radius-full);
}

.amro-presence-orb__ring {
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--amro-border) 62%, transparent);
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    transform var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-presence-orb__core {
  display: grid;
  place-items: center;
  inset: 8px;
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-presence-orb__core svg {
  width: 52%;
  height: 52%;
}

.amro-presence-orb--listening .amro-presence-orb__core,
.amro-presence-orb--speaking .amro-presence-orb__core {
  box-shadow: var(--amro-glow-active-ai);
}

.amro-presence-orb--listening .amro-presence-orb__ring,
.amro-presence-orb--speaking .amro-presence-orb__ring {
  border-color: var(--amro-accent-cyan);
  animation: amro-presence-pulse var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}

.amro-presence-orb--thinking .amro-presence-orb__ring {
  border-color: var(--amro-accent-teal);
  border-style: dashed;
  animation: amro-presence-spin var(--amro-duration-progress) linear infinite;
}

.amro-presence-orb--error .amro-presence-orb__ring {
  border-color: var(--amro-status-danger);
}

.amro-launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-3);
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 42%, var(--amro-border));
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-2) var(--amro-space-5) var(--amro-space-2) var(--amro-space-2);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-control);
  font: inherit;
  font-weight: var(--amro-font-strong);
  cursor: pointer;
}

.amro-launcher--attention {
  box-shadow: var(--amro-glow-active-ai);
}

.amro-launcher--minimized {
  padding-right: var(--amro-space-2);
}

.amro-launcher__unread {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: var(--amro-accent-cyan);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}

.amro-assistant-header {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}

.amro-assistant-header__identity {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
  min-width: 0;
}

.amro-assistant-header__identity span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-mode-bar {
  display: flex;
  gap: var(--amro-space-1);
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-1);
  background: color-mix(in srgb, var(--amro-surface) 78%, transparent);
}

.amro-mode-bar__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--amro-space-2);
  min-height: 38px;
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: var(--amro-foreground-muted);
  background: transparent;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.amro-mode-bar__option[aria-selected="true"] {
  color: var(--amro-foreground);
  background: var(--amro-background);
  box-shadow: var(--amro-shadow-control);
}

.amro-composer {
  display: grid;
  gap: var(--amro-space-2);
  width: min(100%, 680px);
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-3);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-control);
}

.amro-composer:focus-within {
  border-color: var(--amro-accent-cyan);
}

.amro-composer__input {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 0;
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
  line-height: var(--amro-leading-body);
}

.amro-composer__input:focus {
  outline: 0;
}

.amro-composer__toolbar,
.amro-composer__tools {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-composer__toolbar {
  justify-content: space-between;
}

.amro-command-trigger {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 48%, transparent);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground-muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.amro-message {
  display: flex;
  align-items: flex-start;
  gap: var(--amro-space-3);
  max-width: min(100%, 680px);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-message--human {
  justify-content: flex-end;
  margin-left: auto;
}

.amro-message__content {
  display: grid;
  gap: var(--amro-space-2);
  max-width: min(82%, 560px);
}

.amro-message__meta,
.amro-message__actions,
.amro-streaming-answer__footer,
.amro-citation__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-message__meta time,
.amro-message__delivery,
.amro-streaming-answer__footer,
.amro-citation__meta {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-message__bubble {
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
  line-height: var(--amro-leading-body);
}

.amro-message--human .amro-message__bubble {
  border-color: color-mix(in srgb, var(--amro-accent-cyan) 38%, transparent);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
}

.amro-streaming-answer {
  display: grid;
  gap: var(--amro-space-3);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-streaming-answer__content {
  line-height: var(--amro-leading-body);
}

.amro-prompt-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--amro-space-3);
  width: 100%;
}

.amro-prompt-card {
  display: grid;
  gap: var(--amro-space-2);
  min-height: 90px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.amro-prompt-card:hover {
  border-color: var(--amro-accent-cyan);
}

.amro-prompt-card span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-citation-tray {
  width: 100%;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-citation-tray > summary {
  width: fit-content;
  color: var(--amro-accent-cyan);
  cursor: pointer;
}

.amro-citation-tray__list {
  display: grid;
  gap: var(--amro-space-2);
  margin-top: var(--amro-space-3);
}

.amro-citation {
  display: flex;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border: 1px solid color-mix(in srgb, var(--amro-border) 38%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: color-mix(in srgb, var(--amro-background) 60%, transparent);
}

.amro-citation p {
  margin: var(--amro-space-1) 0 0;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-typing-stack {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
}

.amro-typing-stack__avatars {
  display: flex;
}

.amro-typing-stack__avatars .amro-avatar + .amro-avatar {
  margin-left: calc(var(--amro-space-2) * -1);
}

.amro-typing-dots {
  color: var(--amro-accent-cyan);
  letter-spacing: 0.16em;
}

.amro-escalation-card,
.amro-action-receipt {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: min(100%, 680px);
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}

.amro-escalation-card > div,
.amro-action-receipt > div {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}

.amro-escalation-card p {
  margin: 0;
}

.amro-escalation-card small,
.amro-action-receipt span,
.amro-action-receipt time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-action-receipt > svg:first-child {
  color: var(--amro-status-success);
}

.amro-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-top-color: var(--amro-accent-cyan);
  border-radius: var(--amro-radius-full);
  animation: amro-presence-spin var(--amro-duration-progress) linear infinite;
}

.amro-voice-dock {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: min(100%, 760px);
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 34%, var(--amro-border));
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
  font-family: var(--amro-font-sans);
}

.amro-waveform {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 80px;
  height: 38px;
}

.amro-waveform span {
  width: 3px;
  height: calc(8px + 28px * var(--amro-wave-level));
  border-radius: var(--amro-radius-full);
  background: linear-gradient(var(--amro-accent-teal), var(--amro-accent-cyan));
  transition: height var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-voice-dock__elapsed {
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
  font-variant-numeric: tabular-nums;
}

.amro-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  list-style: none;
}

.amro-timeline__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--amro-space-3);
  min-height: 64px;
  position: relative;
}

.amro-timeline__item::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -18px;
  left: 7px;
  width: 1px;
  background: color-mix(in srgb, var(--amro-border) 48%, transparent);
}

.amro-timeline__item:last-child::before {
  display: none;
}

.amro-timeline__marker {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border: 3px solid var(--amro-surface);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
  box-shadow: 0 0 0 1px var(--amro-border);
}

.amro-timeline__item > div,
.amro-timeline__item header {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-timeline__item header time,
.amro-timeline__item small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-options-popover {
  width: fit-content;
  position: relative;
}

.amro-options-popover > summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 48%, transparent);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground-muted);
  cursor: pointer;
  list-style: none;
}

.amro-options-popover__menu {
  display: grid;
  z-index: 10;
  width: 240px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-2);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
  position: absolute;
  top: calc(100% + var(--amro-space-2));
  right: 0;
}

.amro-options-popover__menu button {
  display: grid;
  gap: var(--amro-space-1);
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.amro-options-popover__menu button:hover,
.amro-options-popover__menu button:focus-visible {
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}

.amro-options-popover__menu span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

@keyframes amro-presence-pulse {
  50% {
    opacity: 0.42;
    transform: scale(1.12);
  }
}

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

@media (max-width: 640px) {
  .amro-feature-panel__header,
  .amro-escalation-card,
  .amro-voice-dock {
    align-items: stretch;
    flex-direction: column;
  }

  .amro-message__content {
    max-width: 88%;
  }

  .amro-product-surface__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .amro-product-surface__item em {
    grid-column: 1 / -1;
  }
}

/* AmroVisionAI — generation workspaces, asset management, and production controls */
.amro-image-workbench,
.amro-prompt-brief,
.amro-prompt-diff,
.amro-variation-controls,
.amro-generation-canvas,
.amro-variant-grid,
.amro-reference-tray,
.amro-provider-strip,
.amro-style-recipe,
.amro-ratio-picker,
.amro-brand-visual,
.amro-crop-set,
.amro-asset-detail,
.amro-version-stack,
.amro-prompt-history,
.amro-favourite-collection,
.amro-asset-usage,
.amro-download-menu,
.amro-alt-generator,
.amro-credit-cost,
.amro-credit-receipt,
.amro-api-asset,
.amro-safety-explanation,
.amro-empty-gallery,
.amro-fallback-notice,
.amro-safe-overlay {
  width: min(100%, 960px);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-image-workbench textarea,
.amro-guest-form textarea,
.amro-cancel-dialog textarea,
.amro-booking-details textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  line-height: var(--amro-leading-body);
}

.amro-image-workbench textarea:focus-visible,
.amro-guest-form textarea:focus-visible,
.amro-cancel-dialog textarea:focus-visible,
.amro-booking-details textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-image-workbench .amro-feature-panel__body,
.amro-prompt-brief .amro-feature-panel__body,
.amro-alt-generator .amro-feature-panel__body,
.amro-api-asset .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-5);
}

.amro-image-workbench label,
.amro-guest-form label,
.amro-booking-details label,
.amro-cancel-dialog label {
  display: grid;
  gap: var(--amro-space-2);
  color: var(--amro-foreground);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}

.amro-image-workbench label small,
.amro-guest-form label small,
.amro-booking-details label small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  font-weight: normal;
}

.amro-image-workbench .amro-feature-panel__body > div,
.amro-prompt-brief .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--amro-space-3);
}

.amro-image-workbench footer,
.amro-prompt-brief footer,
.amro-variation-controls footer,
.amro-asset-detail footer,
.amro-alt-generator footer,
.amro-credit-cost footer,
.amro-api-asset footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-prompt-brief footer > span,
.amro-generation-canvas__loading,
.amro-fallback-notice,
.amro-safety-explanation > div,
.amro-credit-receipt > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-prompt-diff .amro-feature-panel__body > div:first-child {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--amro-space-4);
}

.amro-prompt-diff section {
  min-height: 150px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}

.amro-prompt-diff ul,
.amro-prompt-history ol,
.amro-version-stack ol,
.amro-asset-usage ul,
.amro-safety-explanation ul,
.amro-download-menu ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amro-prompt-diff li,
.amro-safety-explanation li {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-prompt-diff li svg,
.amro-safety-explanation li svg {
  color: var(--amro-status-success);
}

.amro-variation-controls .amro-feature-panel__body,
.amro-reference-tray .amro-feature-panel__body,
.amro-provider-strip .amro-feature-panel__body,
.amro-ratio-picker .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}

.amro-variation-controls fieldset,
.amro-ratio-picker fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}

.amro-variation-controls label,
.amro-provider-strip button,
.amro-ratio-picker label {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  cursor: pointer;
}

.amro-generation-canvas {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}

.amro-generation-canvas__stage {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 20%,
      color-mix(in srgb, var(--amro-accent-cyan) 18%, transparent),
      transparent 35%
    ),
    linear-gradient(145deg, var(--amro-surface-strong), var(--amro-canvas));
}

.amro-generation-canvas__art,
.amro-variant-grid__art,
.amro-safe-overlay__art,
.amro-crop-set__preview,
.amro-style-recipe__preview,
.amro-asset-gallery-card__preview,
.amro-asset-detail__preview,
.amro-alt-generator__asset {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--amro-accent-cyan);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--amro-accent-teal) 24%, transparent),
      transparent
    ),
    var(--amro-surface-strong);
}

.amro-generation-canvas__art {
  width: 100%;
  min-height: 420px;
}

.amro-generation-canvas__art img,
.amro-variant-grid__art img,
.amro-crop-set__preview img,
.amro-style-recipe__preview img,
.amro-asset-gallery-card__preview img,
.amro-asset-detail__preview img,
.amro-alt-generator__asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amro-generation-canvas__loading {
  color: var(--amro-foreground-muted);
}

.amro-generation-canvas__loading svg,
.amro-empty-gallery > svg {
  width: 36px;
  height: 36px;
  color: var(--amro-accent-cyan);
}

.amro-generation-canvas__error,
.amro-fallback-notice {
  margin: var(--amro-space-4);
  border: 1px solid color-mix(in srgb, var(--amro-status-danger) 45%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  color: var(--amro-status-danger);
  background: color-mix(in srgb, var(--amro-status-danger) 8%, var(--amro-surface));
}

.amro-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-variant-grid > button,
.amro-style-recipe,
.amro-asset-gallery-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: 0;
  color: var(--amro-foreground);
  background: var(--amro-surface);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--amro-duration-state) var(--amro-ease-standard),
    border-color var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-variant-grid > button:hover,
.amro-style-recipe:hover,
.amro-asset-gallery-card:hover {
  transform: translateY(-2px);
  border-color: var(--amro-accent-teal);
}

.amro-variant-grid__art,
.amro-style-recipe__preview,
.amro-asset-gallery-card__preview {
  min-height: 180px;
}

.amro-variant-grid > button > span,
.amro-style-recipe > span,
.amro-asset-gallery-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  padding: var(--amro-space-3) var(--amro-space-4);
}

.amro-reference-tray > div,
.amro-provider-strip > div,
.amro-ratio-picker > div,
.amro-crop-set,
.amro-empty-gallery__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-3);
}

.amro-reference-tray__thumb,
.amro-version-stack__thumb {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  background: var(--amro-surface-strong);
}

.amro-reference-tray__thumb img,
.amro-version-stack__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amro-ratio-picker__shape {
  display: block;
  width: 32px;
  min-height: 22px;
  border: 1px solid currentColor;
  border-radius: var(--amro-radius-control-sm);
}

.amro-brand-visual__palette {
  display: flex;
  gap: var(--amro-space-2);
}

.amro-brand-visual__palette span {
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 65%, transparent);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
}

.amro-brand-visual__palette span:nth-child(even) {
  background: var(--amro-accent-teal);
}

.amro-asset-detail__body {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(220px, 0.7fr);
  gap: var(--amro-space-5);
}

.amro-asset-detail__preview {
  min-height: 320px;
  border-radius: var(--amro-radius-control-lg);
}

.amro-version-stack li,
.amro-prompt-history li,
.amro-asset-usage li,
.amro-download-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding-block: var(--amro-space-3);
}

.amro-credit-receipt,
.amro-fallback-notice,
.amro-api-asset,
.amro-safety-explanation,
.amro-empty-gallery {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}

.amro-empty-gallery {
  display: grid;
  min-height: 300px;
  place-items: center;
  gap: var(--amro-space-3);
  text-align: center;
}

.amro-safe-overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--amro-radius-card-lg);
}

.amro-safe-overlay__art {
  min-height: 360px;
}

.amro-safe-overlay [data-safe-area] {
  position: absolute;
  border: 1px dashed var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}

/* AmroMeet — instant conversations, booking, routing, and calendar operations */
.amro-instant-meet,
.amro-host-presence,
.amro-date-cell,
.amro-timezone-pill,
.amro-source-context,
.amro-conflict-indicator,
.amro-agent-handoff {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-instant-meet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-4);
  width: min(100%, 900px);
  border: 1px solid color-mix(in srgb, var(--amro-accent-teal) 45%, var(--amro-border));
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--amro-accent-teal) 9%, transparent),
      transparent
    ),
    var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}

.amro-instant-meet > span:nth-child(2),
.amro-host-presence > span,
.amro-booking-summary li > span,
.amro-confirmation-card__status > span,
.amro-calendar-connection > span,
.amro-host-routing li > span,
.amro-agent-handoff > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-instant-meet small,
.amro-host-presence small,
.amro-booking-summary small,
.amro-confirmation-card small,
.amro-calendar-connection small,
.amro-host-routing small,
.amro-agent-handoff small {
  color: var(--amro-foreground-muted);
}

.amro-instant-meet > div,
.amro-live-meet-ready__delivery,
.amro-confirmation-card__status,
.amro-calendar-connection,
.amro-agent-handoff {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-instant-meet__icon {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: var(--amro-radius-control-lg);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}

.amro-instant-meet__icon i {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--amro-surface);
  border-radius: var(--amro-radius-full);
  background: var(--amro-status-success);
}

.amro-guest-form,
.amro-live-meet-ready,
.amro-talk-fallback,
.amro-event-switcher,
.amro-time-slots,
.amro-booking-steps,
.amro-booking-details,
.amro-meeting-reason,
.amro-ai-meeting-brief,
.amro-booking-summary,
.amro-delivery-status,
.amro-reschedule-panel,
.amro-cancel-dialog,
.amro-rules-editor,
.amro-buffer-control,
.amro-meeting-limit,
.amro-embed-config,
.amro-host-routing {
  width: min(100%, 880px);
}

.amro-guest-form .amro-feature-panel__body,
.amro-booking-details .amro-feature-panel__body,
.amro-cancel-dialog .amro-feature-panel__body,
.amro-embed-config .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-5);
}

.amro-guest-form .amro-feature-panel__body > div,
.amro-booking-details .amro-feature-panel__body > div,
.amro-embed-config__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-guest-form label:last-child,
.amro-booking-details label:last-child {
  grid-column: 1 / -1;
}

.amro-guest-form footer,
.amro-booking-details footer,
.amro-cancel-dialog footer,
.amro-reschedule-panel footer,
.amro-rules-editor footer,
.amro-embed-config footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}

.amro-guest-form footer > span,
.amro-booking-details__consent {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-live-meet-ready .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}

.amro-live-meet-ready__link,
.amro-confirmation-card__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}

.amro-live-meet-ready__link code,
.amro-confirmation-card__link code {
  overflow: hidden;
  color: var(--amro-accent-cyan);
  font-family: var(--amro-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amro-host-presence {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: fit-content;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-2) var(--amro-space-4) var(--amro-space-2) var(--amro-space-2);
  background: var(--amro-surface);
}

.amro-host-presence--compact {
  padding-right: var(--amro-space-2);
}

.amro-event-switcher .amro-feature-panel__body,
.amro-time-slots .amro-feature-panel__body,
.amro-booking-steps .amro-feature-panel__body,
.amro-meeting-reason .amro-feature-panel__body,
.amro-rules-editor .amro-feature-panel__body,
.amro-host-routing .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}

.amro-event-switcher [role="tablist"],
.amro-time-slots [role="listbox"],
.amro-meeting-reason__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}

.amro-event-switcher [role="tab"],
.amro-time-slots [role="option"],
.amro-meeting-reason__topics button,
.amro-timezone-pill,
.amro-source-context {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-height: 38px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding-inline: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
}

.amro-event-switcher [aria-selected="true"],
.amro-time-slots [aria-selected="true"],
.amro-meeting-reason__topics [aria-pressed="true"] {
  border-color: var(--amro-accent-teal);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-teal) 12%, var(--amro-surface));
}

.amro-event-type-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--amro-space-4);
  width: min(100%, 620px);
}

.amro-event-type-card--selected {
  border-color: var(--amro-accent-teal);
  box-shadow: var(--amro-glow-active-ai);
}

.amro-event-type-card > span,
.amro-event-type-card li {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-event-type-card ul {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
  list-style: none;
}

.amro-date-cell {
  position: relative;
  display: grid;
  width: 48px;
  height: 52px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--amro-radius-control);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.amro-date-cell:hover:not(:disabled),
.amro-date-cell[aria-pressed="true"] {
  border-color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 10%, transparent);
}

.amro-date-cell:disabled {
  color: var(--amro-foreground-muted);
  opacity: 0.42;
  cursor: not-allowed;
}

.amro-date-cell i {
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-status-success);
}

.amro-date-cell small {
  position: absolute;
  top: 3px;
  right: 5px;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-booking-steps ol,
.amro-booking-summary ul,
.amro-delivery-status ol,
.amro-rules-editor ul,
.amro-host-routing ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amro-booking-steps li,
.amro-booking-summary li,
.amro-delivery-status li,
.amro-rules-editor li,
.amro-host-routing li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) var(--amro-space-4);
  background: var(--amro-surface-muted);
}

.amro-ai-meeting-brief__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-ai-meeting-brief__columns section,
.amro-reschedule-panel__current,
.amro-conflict-indicator,
.amro-buffer-control,
.amro-meeting-limit,
.amro-calendar-connection,
.amro-agent-handoff {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}

.amro-booking-summary li > svg,
.amro-confirmation-card__status > svg,
.amro-calendar-connection > svg,
.amro-agent-handoff > svg {
  color: var(--amro-accent-cyan);
}

.amro-confirmation-card {
  display: grid;
  width: min(100%, 680px);
  gap: var(--amro-space-5);
  text-align: center;
}

.amro-confirmation-card > svg {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  color: var(--amro-status-success);
}

.amro-reschedule-panel,
.amro-booking-preview {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
  font-family: var(--amro-font-sans);
}

.amro-rules-editor li {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.amro-buffer-control,
.amro-meeting-limit {
  display: grid;
  gap: var(--amro-space-3);
}

.amro-buffer-control > div,
.amro-meeting-limit > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}

.amro-booking-preview {
  grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.25fr);
  width: min(100%, 820px);
}

.amro-booking-preview--compact {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.amro-booking-preview__calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--amro-space-1);
}

.amro-booking-preview__calendar > span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-radius: var(--amro-radius-control-sm);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  background: var(--amro-surface-muted);
}

.amro-source-context {
  color: var(--amro-accent-cyan);
}

.amro-conflict-indicator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: min(100%, 680px);
  border-color: color-mix(in srgb, var(--amro-status-warning) 45%, var(--amro-border));
}

.amro-embed-config code {
  overflow: auto;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-strong);
  font-family: var(--amro-font-mono);
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .amro-image-workbench .amro-feature-panel__body > div,
  .amro-prompt-brief .amro-feature-panel__body > div,
  .amro-asset-detail__body,
  .amro-guest-form .amro-feature-panel__body > div,
  .amro-booking-details .amro-feature-panel__body > div,
  .amro-embed-config__controls,
  .amro-ai-meeting-brief__columns,
  .amro-booking-preview {
    grid-template-columns: 1fr;
  }

  .amro-instant-meet {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .amro-instant-meet > .amro-status-indicator,
  .amro-instant-meet > div {
    grid-column: 1 / -1;
  }

  .amro-instant-meet > div,
  .amro-image-workbench footer,
  .amro-prompt-brief footer,
  .amro-guest-form footer,
  .amro-booking-details footer,
  .amro-cancel-dialog footer,
  .amro-reschedule-panel footer,
  .amro-rules-editor footer {
    align-items: stretch;
    flex-direction: column;
  }

  .amro-prompt-diff .amro-feature-panel__body > div:first-child {
    grid-template-columns: 1fr;
  }

  .amro-prompt-diff .amro-feature-panel__body > div:first-child > svg {
    transform: rotate(90deg);
  }

  .amro-variant-grid {
    grid-template-columns: 1fr;
  }
}

.amro-campaign-tabs,
.amro-channel-strip,
.amro-message-variants > div,
.amro-campaign-command,
.amro-campaign-command > div,
.amro-sender-identity header,
.amro-sender-identity > div,
.amro-send-window header,
.amro-send-window > div,
.amro-bulk-review .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-campaign-tabs {
  overflow-x: auto;
  border-bottom: 1px solid var(--amro-border);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-campaign-tabs button,
.amro-channel-strip button,
.amro-sequence button,
.amro-message-variants button,
.amro-personalisation-evidence button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.amro-campaign-tabs button {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-height: 44px;
  border-bottom: 2px solid transparent;
  padding: 0 var(--amro-space-3);
  white-space: nowrap;
}
.amro-campaign-tabs button[aria-selected="true"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
}
.amro-channel-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--amro-font-sans);
}
.amro-channel-strip button {
  display: grid;
  gap: var(--amro-space-2);
  min-width: 0;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-channel-strip small {
  overflow: hidden;
  color: var(--amro-foreground-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amro-message-preview .amro-feature-panel__body {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) 1fr;
  gap: var(--amro-space-5);
}
.amro-message-preview aside {
  display: grid;
  align-content: start;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-3);
  border-right: 1px solid var(--amro-border);
  padding-right: var(--amro-space-4);
}
.amro-message-preview aside > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-message-preview aside p {
  grid-column: 1 / -1;
  color: var(--amro-foreground-muted);
}
.amro-message-preview textarea,
.amro-retry-guidance textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-background);
  font: inherit;
  line-height: var(--amro-leading-body);
}
.amro-message-preview .amro-feature-panel__body > div > small {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-sequence {
  display: grid;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  list-style: none;
}
.amro-sequence li {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-sequence li > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-sequence li > span:first-child {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-message-variants {
  display: grid;
  gap: var(--amro-space-3);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-message-variants > div {
  width: fit-content;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-1);
}
.amro-message-variants button {
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2) var(--amro-space-3);
  text-transform: capitalize;
}
.amro-message-variants button[aria-checked="true"] {
  background: var(--amro-surface-muted);
}
.amro-personalisation-evidence .amro-feature-panel__body {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 0.55fr);
  gap: var(--amro-space-4);
}
.amro-personalisation-evidence .amro-feature-panel__body > div {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-personalisation-evidence button {
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-personalisation-evidence button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, var(--amro-surface));
}
.amro-personalisation-evidence aside {
  display: grid;
  align-content: start;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-personalisation-evidence aside span {
  display: flex;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-outreach-quality {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-outreach-quality header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-outreach-quality header > span {
  display: grid;
}
.amro-outreach-quality header strong {
  font-size: var(--amro-text-xl);
}
.amro-outreach-quality header i {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
  font-style: normal;
}
.amro-outreach-quality ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-outreach-quality li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-outreach-quality meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-weak-draft {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-status-danger);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-status-danger) 7%, var(--amro-surface));
  font-family: var(--amro-font-sans);
}
.amro-weak-draft > svg {
  color: var(--amro-status-danger);
}
.amro-weak-draft ul {
  margin-bottom: 0;
  color: var(--amro-foreground-muted);
}
.amro-weak-draft > div {
  display: flex;
  align-items: center;
}
.amro-retry-guidance {
  display: grid;
  gap: var(--amro-space-3);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-retry-guidance label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-retry-guidance > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-retry-guidance small {
  color: var(--amro-foreground-muted);
}
.amro-approval-gate .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-approval-gate .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 8%, transparent);
}
.amro-approval-gate footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--amro-space-2);
}
.amro-bulk-review .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-bulk-review .amro-feature-panel__body > div {
  justify-content: flex-end;
}
.amro-approval-diff .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-approval-diff section {
  display: grid;
  align-content: start;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-approval-diff del {
  color: var(--amro-status-danger);
}
.amro-approval-diff ins {
  color: var(--amro-status-success);
  text-decoration: none;
}
.amro-send-window {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-send-window header {
  justify-content: space-between;
}
.amro-send-window header > span {
  display: grid;
}
.amro-send-window small {
  color: var(--amro-foreground-muted);
}
.amro-send-window__days button {
  flex: 1;
  min-height: 36px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-sm);
  color: inherit;
  background: transparent;
}
.amro-send-window__days button[aria-pressed="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-send-window > div:not(.amro-send-window__days) {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
}
.amro-send-window > label:last-child {
  color: var(--amro-foreground-muted);
}
.amro-campaign-progress progress,
.amro-credit-usage progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-campaign-progress ul {
  margin: var(--amro-space-3) 0;
  padding: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 8%, transparent);
  list-style: none;
}
.amro-campaign-progress li {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-campaign-progress footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-campaign-progress footer > span {
  display: grid;
}
.amro-campaign-command {
  justify-content: space-between;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-credit-usage ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: var(--amro-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.amro-credit-usage li {
  display: flex;
  justify-content: space-between;
  color: var(--amro-foreground-muted);
}
.amro-credit-usage li strong {
  color: var(--amro-foreground);
  font-variant-numeric: tabular-nums;
}
.amro-sender-identity {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-sender-identity header > span {
  display: grid;
  flex: 1;
}
.amro-sender-identity small {
  color: var(--amro-foreground-muted);
}
.amro-autonomy {
  display: grid;
  gap: var(--amro-space-2);
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-autonomy legend {
  margin-bottom: var(--amro-space-3);
  font-weight: var(--amro-font-strong);
}
.amro-autonomy label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-autonomy label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-autonomy label > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-autonomy small {
  color: var(--amro-foreground-muted);
}
.amro-sales-audit {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-sales-audit > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  padding: var(--amro-space-4);
}
.amro-sales-audit > header > span {
  display: grid;
}
.amro-sales-audit small {
  color: var(--amro-foreground-muted);
}
.amro-sales-audit > header label {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
}
.amro-sales-audit input {
  min-height: 38px;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
}
.amro-sales-audit [role="table"] {
  display: grid;
}
.amro-sales-audit [role="row"] {
  display: grid;
  grid-template-columns: 70px 1fr 1fr 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
}

/* AmroPilot editorial planning and research */
.amro-pipeline-stage-card__meta,
.amro-pipeline-stage-card footer,
.amro-keyword-brief footer,
.amro-serp-research__tabs,
.amro-keyword-cluster > header,
.amro-keyword-cluster > footer,
.amro-content-brief article > header,
.amro-outline-editor > header,
.amro-workspace-switcher button,
.amro-brand-capsule > header,
.amro-brand-capsule > div > span,
.amro-brand-capsule > div > span > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-pipeline-stage-card .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-pipeline-stage-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.amro-pipeline-stage-card__meta > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-1) var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-pipeline-stage-card__meta svg {
  grid-row: 1 / 3;
  color: var(--amro-accent-cyan);
}
.amro-pipeline-stage-card small {
  color: var(--amro-foreground-muted);
}
.amro-pipeline-stage-card ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 8%, transparent);
  list-style: none;
}
.amro-pipeline-stage-card li {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-pipeline-stage-card footer {
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-pipeline-stage-card footer > span {
  display: grid;
}

.amro-keyword-brief__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-4);
}
.amro-keyword-brief__grid > .amro-field:first-child,
.amro-keyword-brief__grid > .amro-search-intent {
  grid-column: 1 / -1;
}
.amro-keyword-brief footer {
  justify-content: space-between;
  margin-top: var(--amro-space-5);
}
.amro-keyword-brief footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-search-intent {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-search-intent legend {
  margin-bottom: var(--amro-space-2);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}
.amro-search-intent > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-2);
}
.amro-search-intent label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-search-intent label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-search-intent label > span {
  display: grid;
  gap: var(--amro-space-1);
  text-transform: capitalize;
}
.amro-search-intent small {
  color: var(--amro-foreground-muted);
  text-transform: none;
}

.amro-serp-research .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-serp-research__tabs {
  border-bottom: 1px solid var(--amro-border);
}
.amro-serp-research__tabs button,
.amro-serp-research ol button,
.amro-keyword-cluster button,
.amro-outline-editor button,
.amro-workspace-switcher button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.amro-serp-research__tabs button {
  border-bottom: 2px solid transparent;
  padding: var(--amro-space-2) var(--amro-space-3);
  text-transform: capitalize;
}
.amro-serp-research__tabs button[aria-selected="true"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
}
.amro-serp-research ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-serp-research ol li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-serp-research ol li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
  font-weight: var(--amro-font-strong);
}
.amro-serp-research ol button {
  display: grid;
  gap: var(--amro-space-1);
  text-align: left;
}
.amro-serp-research small {
  color: var(--amro-foreground-muted);
}
.amro-serp-research__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-serp-research__gaps {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-serp-research__gaps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-serp-research__gaps li > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-keyword-cluster {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-keyword-cluster > header {
  justify-content: space-between;
}
.amro-keyword-cluster > header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-keyword-cluster small {
  color: var(--amro-foreground-muted);
}
.amro-keyword-cluster > div {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: var(--amro-space-2);
}
.amro-keyword-cluster button {
  display: grid;
  align-content: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-keyword-cluster button[data-kind="primary"] {
  grid-column: span 6;
  border-color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 10%, transparent);
}
.amro-keyword-cluster button[data-kind="semantic"] {
  grid-column: span 3;
}
.amro-keyword-cluster button[data-kind="question"] {
  grid-column: span 4;
  border-color: color-mix(in srgb, var(--amro-accent-cyan) 55%, var(--amro-border));
}
.amro-keyword-cluster > footer {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-keyword-cluster > footer span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-keyword-cluster i {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-keyword-cluster i[data-kind="primary"] {
  background: var(--amro-accent-teal);
}
.amro-keyword-cluster i[data-kind="question"] {
  background: var(--amro-accent-cyan);
}

.amro-content-brief .amro-feature-panel__body > div {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-content-brief article {
  display: grid;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
}
.amro-content-brief article > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.amro-content-brief article > header > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-content-brief article > header label {
  display: flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-content-brief article > header input[type="number"] {
  width: 70px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-content-brief article > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-content-brief article > div > span {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-content-brief article > div strong {
  width: 100%;
  font-size: var(--amro-text-sm);
}
.amro-content-brief textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-background);
  font: inherit;
}

.amro-outline-editor {
  display: grid;
  gap: var(--amro-space-4);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-outline-editor > header {
  justify-content: space-between;
}
.amro-outline-editor > header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-outline-editor small {
  color: var(--amro-foreground-muted);
}
.amro-outline-editor ol {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-outline-editor li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface);
}
.amro-outline-editor li[data-level="3"] {
  margin-left: var(--amro-space-6);
}
.amro-outline-editor li > svg {
  color: var(--amro-foreground-muted);
  cursor: grab;
}
.amro-outline-editor li > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-outline-editor li > div {
  display: flex;
  gap: var(--amro-space-1);
}
.amro-outline-editor li > div button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-control-sm);
}
.amro-outline-editor li > div button:hover {
  background: var(--amro-surface-muted);
}

.amro-workspace-switcher {
  position: relative;
  width: min(100%, 340px);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-workspace-switcher > button {
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: var(--amro-surface);
  text-align: left;
}
.amro-workspace-switcher button > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-workspace-switcher small {
  color: var(--amro-foreground-muted);
}
.amro-workspace-switcher__logo {
  display: grid;
  flex: 0 0 auto !important;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-workspace-switcher [role="listbox"] {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--amro-space-2));
  display: grid;
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-2);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-workspace-switcher [role="option"] {
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-workspace-switcher [role="option"][aria-selected="true"] {
  background: var(--amro-surface-muted);
}

.amro-brand-capsule {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-brand-capsule > header > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-brand-capsule__logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--amro-radius-control);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  font-weight: var(--amro-font-strong);
}
.amro-brand-capsule__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amro-brand-capsule > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-3);
  border-block: 1px solid var(--amro-border);
  padding-block: var(--amro-space-4);
}
.amro-brand-capsule > div > span {
  align-items: flex-start;
  flex-direction: column;
}
.amro-brand-capsule > div small {
  color: var(--amro-foreground-muted);
}
.amro-brand-capsule i {
  width: 18px;
  height: 18px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-teal);
}
.amro-brand-capsule i[data-color="accent-cyan"] {
  background: var(--amro-accent-cyan);
}
.amro-brand-capsule i[data-color="surface-strong"] {
  background: var(--amro-surface-strong);
}

.amro-brand-voice ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-brand-voice li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 2fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-brand-voice li > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-brand-voice li small {
  color: var(--amro-foreground-muted);
}
.amro-brand-voice meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}

@media (max-width: 700px) {
  .amro-keyword-brief__grid,
  .amro-search-intent > div,
  .amro-content-brief article > div,
  .amro-brand-capsule > div {
    grid-template-columns: 1fr;
  }
  .amro-keyword-brief__grid > .amro-field,
  .amro-keyword-brief__grid > .amro-search-intent {
    grid-column: auto;
  }
  .amro-keyword-brief footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-keyword-cluster button[data-kind] {
    grid-column: span 12;
  }
  .amro-outline-editor li[data-level="3"] {
    margin-left: var(--amro-space-3);
  }
}

/* AmroPilot editor, quality, review, and export */
.amro-article-workspace,
.amro-section-control,
.amro-inline-ai-menu,
.amro-citation-inspector,
.amro-trust-warning,
.amro-issue-navigator,
.amro-ai-image-slot,
.amro-internal-link,
.amro-metadata-preview,
.amro-version-timeline,
.amro-review-mode,
.amro-export-tray,
.amro-branded-preview,
.amro-webhook-tester,
.amro-article-status {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-article-workspace {
  display: grid;
  grid-template-columns: 230px minmax(320px, 1fr) 240px;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
}
.amro-article-workspace > aside:first-child {
  border-right: 1px solid var(--amro-border);
}
.amro-article-workspace > aside:last-child {
  border-left: 1px solid var(--amro-border);
}
.amro-article-workspace aside header,
.amro-article-workspace main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-2);
  min-height: 58px;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-article-workspace nav {
  display: grid;
  padding: var(--amro-space-2);
}
.amro-article-workspace nav button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-article-workspace nav button[aria-current="true"] {
  background: var(--amro-surface-muted);
}
.amro-article-workspace nav button > span:first-child {
  color: var(--amro-accent-cyan);
}
.amro-article-workspace nav button > span:last-child,
.amro-article-workspace main header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-article-workspace small {
  color: var(--amro-foreground-muted);
}
.amro-article-workspace main article {
  padding: var(--amro-space-6);
}
.amro-article-workspace main textarea {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  border: 0;
  outline: 0;
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
  line-height: 1.8;
}
.amro-article-workspace aside ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  padding: var(--amro-space-3);
  list-style: none;
}
.amro-article-workspace aside li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--amro-space-2);
}
.amro-article-workspace aside li meter {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-section-control {
  display: grid;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-section-control header,
.amro-section-control footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-2);
}
.amro-section-control header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-section-control small {
  color: var(--amro-foreground-muted);
}
.amro-section-control label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-section-control input {
  min-height: 42px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-inline-ai-menu {
  width: min(320px, 90vw);
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-inline-ai-menu header {
  display: flex;
  justify-content: space-between;
  gap: var(--amro-space-2);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-inline-ai-menu header > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-1) var(--amro-space-2);
}
.amro-inline-ai-menu header svg {
  grid-row: 1 / 3;
  color: var(--amro-accent-cyan);
}
.amro-inline-ai-menu small {
  color: var(--amro-foreground-muted);
}
.amro-inline-ai-menu button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.amro-inline-ai-menu > div {
  display: grid;
  padding: var(--amro-space-2);
}
.amro-inline-ai-menu [role="menuitem"] {
  display: flex;
  justify-content: space-between;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-inline-ai-menu [role="menuitem"]:hover {
  background: var(--amro-surface-muted);
}
.amro-claim-verification blockquote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  margin: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-claim-verification blockquote svg {
  color: var(--amro-accent-cyan);
}
.amro-claim-verification blockquote p {
  margin: 0;
}
.amro-claim-verification cite {
  grid-column: 2;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-claim-verification .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--amro-space-2);
  margin-top: var(--amro-space-3);
}
.amro-citation-inspector {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-citation-inspector header,
.amro-citation-inspector footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-2);
}
.amro-citation-inspector header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-citation-inspector small,
.amro-citation-inspector dt {
  color: var(--amro-foreground-muted);
}
.amro-citation-inspector dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.amro-citation-inspector dl > div {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-citation-inspector dd {
  margin: 0;
}
.amro-citation-inspector blockquote {
  margin: 0;
  border-left: 3px solid var(--amro-accent-cyan);
  padding: var(--amro-space-3) var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-trust-warning {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-status-danger);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: color-mix(in srgb, var(--amro-status-danger) 7%, var(--amro-surface));
}
.amro-trust-warning > svg {
  color: var(--amro-status-danger);
}
.amro-trust-warning > span {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-trust-warning blockquote {
  margin: 0;
  border-left: 2px solid var(--amro-status-danger);
  padding-left: var(--amro-space-3);
}
.amro-trust-warning small {
  color: var(--amro-foreground-muted);
}
.amro-trust-warning > div {
  display: flex;
  align-items: center;
}
.amro-content-quality ul {
  display: grid;
  gap: var(--amro-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-content-quality li button {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, 1.6fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-content-quality li button:hover {
  background: var(--amro-surface-muted);
}
.amro-content-quality li span {
  display: grid;
}
.amro-content-quality li small {
  color: var(--amro-foreground-muted);
}
.amro-content-quality meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-issue-navigator {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-issue-navigator > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--amro-space-4);
}
.amro-issue-navigator > header > span {
  display: grid;
}
.amro-issue-navigator small {
  color: var(--amro-foreground-muted);
}
.amro-issue-navigator ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-issue-navigator li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--amro-border);
}
.amro-issue-navigator li > button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.amro-issue-navigator li > button:first-child {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-issue-navigator li[data-active="true"] {
  background: var(--amro-surface-muted);
}
.amro-issue-navigator li > button:first-child > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 10%, transparent);
}
.amro-issue-navigator li > button:first-child > span:nth-child(2) {
  display: grid;
}
.amro-issue-navigator li > button:last-child {
  padding: var(--amro-space-3);
  color: var(--amro-status-success);
}
.amro-ai-image-slot {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-ai-image-slot__preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--amro-radius-control-lg);
  background: var(--amro-surface-muted);
}
.amro-ai-image-slot__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amro-ai-image-slot__preview > span:not(.amro-status-indicator) {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-ai-image-slot__preview .amro-status-indicator {
  position: absolute;
  top: var(--amro-space-3);
  right: var(--amro-space-3);
}
.amro-ai-image-slot > label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-ai-image-slot textarea {
  min-height: 80px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
  font: inherit;
}
.amro-ai-image-slot > div:not(.amro-ai-image-slot__preview) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-ai-image-slot footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--amro-space-2);
}
.amro-figure-quality .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-figure-quality ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-figure-quality li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-figure-quality li > span {
  display: grid;
}
.amro-figure-quality li > svg {
  color: var(--amro-status-danger);
}
.amro-figure-quality li[data-pass="true"] > svg {
  color: var(--amro-status-success);
}
.amro-figure-quality small {
  color: var(--amro-foreground-muted);
}
.amro-internal-link {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-internal-link header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
}
.amro-internal-link header > svg {
  color: var(--amro-accent-cyan);
}
.amro-internal-link header > span {
  display: grid;
}
.amro-internal-link small,
.amro-internal-link p {
  color: var(--amro-foreground-muted);
}
.amro-internal-link > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-internal-link footer {
  display: flex;
  justify-content: flex-end;
}
.amro-metadata-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-5);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-metadata-preview section > div {
  margin-top: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-background);
}
.amro-metadata-preview section strong {
  display: block;
  margin: var(--amro-space-2) 0;
  color: var(--amro-accent-cyan);
  font-size: var(--amro-text-lg);
}
.amro-metadata-preview section p,
.amro-metadata-preview small {
  color: var(--amro-foreground-muted);
}
.amro-metadata-preview form {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-metadata-preview form > label:not(.amro-field) {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-metadata-preview textarea {
  min-height: 86px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
  font: inherit;
}
.amro-metadata-preview form > small {
  justify-self: end;
}
.amro-version-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-version-timeline li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  min-height: 66px;
}
.amro-version-timeline li > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-version-timeline li > span:nth-child(2) {
  display: grid;
}
.amro-version-timeline small {
  color: var(--amro-foreground-muted);
}
.amro-version-timeline li > div {
  display: flex;
}
.amro-review-mode {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-review-mode > header {
  display: flex;
  justify-content: space-between;
  padding: var(--amro-space-4);
}
.amro-review-mode > header > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-review-mode ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-review-mode li {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-review-mode li[data-active="true"] {
  background: var(--amro-surface-muted);
}
.amro-review-mode li > button {
  display: grid;
  gap: var(--amro-space-2);
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-review-mode li > button > span {
  display: flex;
  justify-content: space-between;
}
.amro-review-mode blockquote {
  margin: 0;
  border-left: 2px solid var(--amro-accent-cyan);
  padding-left: var(--amro-space-3);
  color: var(--amro-foreground-muted);
}
.amro-review-mode li footer {
  display: flex;
  justify-content: flex-end;
}
.amro-review-mode > form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--amro-space-2);
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-review-mode > form input {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-export-tray {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-export-tray > header {
  display: flex;
  justify-content: space-between;
}
.amro-export-tray > header > span {
  display: grid;
}
.amro-export-tray small {
  color: var(--amro-foreground-muted);
}
.amro-export-tray > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-2);
}
.amro-export-tray button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-surface);
  text-align: left;
}
.amro-export-tray button > span:first-child {
  color: var(--amro-accent-cyan);
}
.amro-export-tray button > span:nth-child(2) {
  display: grid;
}
.amro-export-tray button:disabled {
  opacity: 0.45;
}
.amro-branded-preview {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-branded-preview > header,
.amro-branded-preview > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amro-branded-preview > header > span:first-child {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-branded-preview > article {
  width: min(100%, 680px);
  min-height: 760px;
  margin-inline: auto;
  border: 1px solid var(--amro-border);
  padding: var(--amro-space-6);
  background: var(--amro-background);
  box-shadow: var(--amro-shadow-card);
}
.amro-branded-preview__brand {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-branded-preview__brand > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-branded-preview h1 {
  margin-top: var(--amro-space-6);
  font-size: var(--amro-text-xl);
}
.amro-branded-preview__byline,
.amro-branded-preview article p {
  color: var(--amro-foreground-muted);
  line-height: var(--amro-leading-body);
}
.amro-branded-preview article footer {
  margin-top: var(--amro-space-6);
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
  color: var(--amro-foreground-muted);
}
.amro-webhook-tester {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-webhook-tester > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amro-webhook-tester > header > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-webhook-tester > header > span > span {
  display: grid;
}
.amro-webhook-tester small {
  color: var(--amro-foreground-muted);
}
.amro-webhook-tester > label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-webhook-tester textarea {
  min-height: 140px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-background);
  font-family: var(--amro-font-mono);
}
.amro-webhook-tester > div {
  display: grid;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-webhook-tester > div[data-state="success"] strong {
  color: var(--amro-status-success);
}
.amro-webhook-tester > div[data-state="error"] strong {
  color: var(--amro-status-danger);
}
.amro-webhook-tester footer {
  display: flex;
  justify-content: flex-end;
}
.amro-credit-forecast ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-credit-forecast li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-2) 0;
}
.amro-credit-forecast li > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-credit-forecast li small {
  color: var(--amro-foreground-muted);
}
.amro-credit-forecast footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--amro-space-4);
}
.amro-credit-forecast footer > span {
  display: grid;
  color: var(--amro-foreground-muted);
}
.amro-article-status {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-article-status header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-article-status header > span:first-child {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-article-status header > span:nth-child(2) {
  display: grid;
}
.amro-article-status small {
  color: var(--amro-foreground-muted);
}
.amro-article-status > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-article-status progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-article-status footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-article-status footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
@media (max-width: 820px) {
  .amro-article-workspace {
    grid-template-columns: 190px 1fr;
  }
  .amro-article-workspace > aside:last-child {
    display: none;
  }
  .amro-export-tray > div {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .amro-article-workspace {
    grid-template-columns: 1fr;
  }
  .amro-article-workspace > aside:first-child {
    display: none;
  }
  .amro-metadata-preview,
  .amro-ai-image-slot > div:not(.amro-ai-image-slot__preview),
  .amro-figure-quality ul {
    grid-template-columns: 1fr;
  }
  .amro-export-tray > div {
    grid-template-columns: 1fr;
  }
  .amro-trust-warning {
    grid-template-columns: auto 1fr;
  }
  .amro-trust-warning > div {
    grid-column: 1 / -1;
  }
  .amro-branded-preview > article {
    min-height: 540px;
    padding: var(--amro-space-4);
  }
}

/* AmroAcademy learning system */
.amro-voice-tutor-orb,
.amro-voice-lesson,
.amro-synced-transcript,
.amro-tutor-conversation,
.amro-understanding-check,
.amro-confidence-selector,
.amro-skill-radar,
.amro-learning-streak,
.amro-badge-toast,
.amro-hands-free,
.amro-learning-context,
.amro-learning-goal,
.amro-allocation-table,
.amro-learning-heatmap,
.amro-role-badge {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-voice-tutor-orb {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  padding: var(--amro-space-5);
  text-align: center;
}
.amro-voice-tutor-orb > div {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 42%, var(--amro-border));
  border-radius: var(--amro-radius-full);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--amro-accent-cyan) 20%, var(--amro-surface)) 0 38%,
    var(--amro-surface) 40%
  );
  box-shadow: var(--amro-glow-active-ai);
}
.amro-voice-tutor-orb > div > span {
  position: absolute;
  inset: calc(var(--amro-space-2) * -1);
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 32%, transparent);
  border-radius: var(--amro-radius-full);
  animation: amro-voice-ring var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}
.amro-voice-tutor-orb > div > span:nth-child(2) {
  animation-delay: calc(var(--amro-duration-pulse) / -3);
}
.amro-voice-tutor-orb > div > span:nth-child(3) {
  animation-delay: calc(var(--amro-duration-pulse) / -1.5);
}
.amro-voice-tutor-orb svg {
  width: 34px;
  height: 34px;
  color: var(--amro-accent-cyan);
}
.amro-voice-tutor-orb small {
  color: var(--amro-foreground-muted);
}
.amro-voice-tutor-orb--paused > div,
.amro-voice-tutor-orb--idle > div {
  box-shadow: none;
}
.amro-voice-tutor-orb--paused > div > span,
.amro-voice-tutor-orb--idle > div > span,
.amro-voice-tutor-orb--error > div > span {
  animation: none;
}
.amro-voice-tutor-orb--error svg {
  color: var(--amro-status-danger);
}
.amro-voice-lesson {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-voice-lesson header,
.amro-voice-lesson footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-voice-lesson header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-voice-lesson small {
  color: var(--amro-foreground-muted);
}
.amro-voice-lesson__transport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-4);
}
.amro-voice-lesson__transport > button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}
.amro-voice-lesson__transport > span {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-voice-lesson__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 54px;
}
.amro-voice-lesson__wave i {
  flex: 1;
  min-width: 2px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-voice-lesson__wave i[data-played="true"] {
  background: var(--amro-accent-cyan);
}
.amro-voice-lesson > input {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-voice-lesson footer button,
.amro-voice-lesson footer label {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-voice-lesson footer select {
  border: 0;
  color: inherit;
  background: transparent;
}
.amro-synced-transcript {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-synced-transcript > header {
  display: flex;
  justify-content: space-between;
  padding: var(--amro-space-4);
}
.amro-synced-transcript > header > span {
  display: grid;
}
.amro-synced-transcript small {
  color: var(--amro-foreground-muted);
}
.amro-synced-transcript ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-synced-transcript li button {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: inherit;
  background: transparent;
  text-align: left;
  line-height: var(--amro-leading-body);
}
.amro-synced-transcript li[data-active="true"] button {
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-synced-transcript time {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-synced-transcript li button > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-synced-transcript mark {
  color: inherit;
  background: transparent;
}
.amro-synced-transcript mark[data-active="true"] {
  color: var(--amro-on-accent);
  background: var(--amro-accent-teal);
}
.amro-ask-tutor {
  min-height: 50px;
}
.amro-ask-tutor__pulse {
  width: 9px;
  height: 9px;
  border-radius: var(--amro-radius-full);
  background: currentColor;
  animation: amro-shared-pulse var(--amro-duration-pulse) infinite;
}
.amro-tutor-conversation {
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
}
.amro-tutor-conversation > header {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-tutor-conversation > header > span:nth-child(2) {
  display: grid;
  flex: 1;
}
.amro-tutor-conversation small {
  color: var(--amro-foreground-muted);
}
.amro-tutor-conversation > header > button,
.amro-tutor-conversation form > button {
  border: 0;
  color: inherit;
  background: transparent;
}
.amro-tutor-conversation [role="log"] {
  display: grid;
  align-content: start;
  gap: var(--amro-space-3);
  overflow: auto;
  padding: var(--amro-space-4);
}
.amro-tutor-conversation article {
  max-width: 82%;
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-tutor-conversation article[data-role="learner"] {
  justify-self: end;
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
}
.amro-tutor-conversation article p {
  margin: var(--amro-space-1) 0 0;
}
.amro-tutor-conversation form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--amro-space-2);
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-tutor-conversation form input {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-tutor-response .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-tutor-response [role="tablist"] {
  display: flex;
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-1);
}
.amro-tutor-response [role="tab"] {
  flex: 1;
  border: 0;
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: transparent;
  text-transform: capitalize;
}
.amro-tutor-response [role="tab"][aria-selected="true"] {
  background: var(--amro-surface-muted);
}
.amro-tutor-response footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--amro-space-2);
}
.amro-understanding-check {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-understanding-check > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-2);
}
.amro-understanding-check button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-surface);
  text-align: left;
}
.amro-understanding-check button[aria-pressed="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 9%, var(--amro-surface));
}
.amro-understanding-check button > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-understanding-check button > span:last-child {
  display: grid;
}
.amro-understanding-check small {
  color: var(--amro-foreground-muted);
}
.amro-knowledge-check .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-knowledge-check [role="radiogroup"] {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-knowledge-check [role="radio"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  text-align: left;
}
.amro-knowledge-check [role="radio"] > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
}
.amro-knowledge-check [role="radio"][data-result="correct"] {
  border-color: var(--amro-status-success);
}
.amro-knowledge-check [role="radio"][data-result="incorrect"] {
  border-color: var(--amro-status-danger);
}
.amro-knowledge-check__explanation {
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-knowledge-check__explanation p {
  margin-bottom: 0;
  color: var(--amro-foreground-muted);
}
.amro-confidence-selector {
  margin: 0;
  border: 0;
  padding: 0;
}
.amro-confidence-selector legend {
  margin-bottom: var(--amro-space-3);
  font-weight: var(--amro-font-strong);
}
.amro-confidence-selector > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--amro-space-2);
}
.amro-confidence-selector label {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-confidence-selector label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 9%, transparent);
}
.amro-confidence-selector input {
  position: absolute;
  opacity: 0;
}
.amro-confidence-selector label > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
  font-weight: var(--amro-font-strong);
}
.amro-confidence-selector small {
  color: var(--amro-foreground-muted);
  text-align: center;
}
.amro-learning-companion,
.amro-programme-card .amro-feature-panel__body,
.amro-journey-resume,
.amro-offline-lesson {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-learning-companion header,
.amro-learning-companion footer,
.amro-journey-resume header,
.amro-journey-resume footer,
.amro-offline-lesson header,
.amro-offline-lesson footer {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-learning-companion header > span:nth-child(2),
.amro-journey-resume header > span,
.amro-journey-resume footer > span,
.amro-offline-lesson header > span:nth-child(2) {
  display: grid;
  flex: 1;
}
.amro-learning-companion small,
.amro-programme-card small,
.amro-journey-resume small,
.amro-offline-lesson small {
  color: var(--amro-foreground-muted);
}
.amro-learning-companion > div {
  display: flex;
  gap: var(--amro-space-4);
  color: var(--amro-foreground-muted);
}
.amro-learning-companion > div span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-learning-companion progress,
.amro-journey-resume progress,
.amro-offline-lesson progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-learning-companion footer {
  justify-content: space-between;
}
.amro-learning-companion footer > span {
  display: grid;
}
.amro-programme-card__instructor {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-programme-card__instructor > span {
  display: grid;
}
.amro-programme-card ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-programme-card li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) 0;
}
.amro-programme-card li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
}
.amro-programme-card footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-programme-card footer > span {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-programme-card footer > span > small {
  width: 100%;
}
.amro-course-composer .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-course-composer .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-course-composer .amro-feature-panel__body > div > .amro-field:nth-child(1),
.amro-course-composer .amro-feature-panel__body > div > .amro-field:nth-child(3) {
  grid-column: 1 / -1;
}
.amro-course-composer footer {
  display: flex;
  align-items: center;
  gap: var(--amro-space-4);
}
.amro-course-composer footer .amro-button {
  margin-left: auto;
}
.amro-course-composer footer label {
  display: flex;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-journey-resume header {
  justify-content: space-between;
}
.amro-journey-resume > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-journey-resume__thumb {
  display: grid;
  place-items: center;
  width: 96px;
  height: 72px;
  border-radius: var(--amro-radius-control-lg);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-journey-resume > div > span:last-child {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-journey-resume footer {
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-learning-map {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-learning-map li button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: transparent;
  text-align: left;
}
.amro-learning-map li[data-status="active"] button {
  background: color-mix(in srgb, var(--amro-accent-cyan) 7%, transparent);
}
.amro-learning-map li button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-learning-map li button > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-learning-map small {
  color: var(--amro-foreground-muted);
}
.amro-learning-map progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-mastery-ring {
  display: flex;
  align-items: center;
  gap: var(--amro-space-5);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-mastery-ring > div {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: var(--amro-radius-full);
  background:
    radial-gradient(circle, var(--amro-surface) 55%, transparent 57%),
    conic-gradient(var(--amro-accent-teal) var(--amro-mastery), var(--amro-surface-muted) 0);
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--amro-accent-cyan) 20%, transparent);
}
.amro-mastery-ring > div > span {
  display: grid;
  justify-items: center;
}
.amro-mastery-ring > div strong {
  font-size: var(--amro-text-xl);
}
.amro-mastery-ring > span {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-mastery-ring small {
  color: var(--amro-foreground-muted);
}
.amro-mastery-ring > span > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-mastery-ring i {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-teal);
}
.amro-mastery-ring i[data-kind="completion"] {
  background: var(--amro-accent-cyan);
}
.amro-skill-radar {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-skill-radar > header,
.amro-learning-streak header,
.amro-learning-streak > div,
.amro-certificate-card footer,
.amro-language-switcher label,
.amro-offline-lesson > div,
.amro-learning-goal header,
.amro-learning-goal footer,
.amro-allocation-table > header,
.amro-learning-heatmap > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-skill-radar > header > span,
.amro-learning-streak header > span:nth-child(2),
.amro-learning-goal header > span,
.amro-allocation-table > header > span,
.amro-learning-heatmap > header > span {
  display: grid;
}
.amro-skill-radar small,
.amro-learning-streak small,
.amro-language-switcher small,
.amro-learning-goal small,
.amro-allocation-table small,
.amro-learning-heatmap small {
  color: var(--amro-foreground-muted);
}
.amro-skill-radar > div {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1fr;
  gap: var(--amro-space-5);
}
.amro-skill-radar svg {
  width: 100%;
  max-height: 260px;
}
.amro-skill-radar__grid {
  fill: var(--amro-surface-muted);
  stroke: var(--amro-border);
}
.amro-skill-radar__shape {
  fill: color-mix(in srgb, var(--amro-accent-cyan) 24%, transparent);
  stroke: var(--amro-accent-cyan);
  stroke-width: 2;
}
.amro-skill-radar ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-skill-radar li button {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-skill-radar li button:hover {
  background: var(--amro-surface-muted);
}
.amro-adaptive-path .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-2);
}
.amro-adaptive-path .amro-feature-panel__body button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  text-align: left;
}
.amro-adaptive-path .amro-feature-panel__body button[data-recommended="true"] {
  border-color: var(--amro-accent-cyan);
}
.amro-adaptive-path button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-adaptive-path button > span:nth-child(2) {
  display: grid;
}
.amro-adaptive-path button .amro-badge {
  grid-column: 1 / -1;
}
.amro-adaptive-path small {
  color: var(--amro-foreground-muted);
}
.amro-learning-streak {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-learning-streak header > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 10%, transparent);
}
.amro-learning-streak header > span:nth-child(2) {
  flex: 1;
}
.amro-learning-streak > div span {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-1);
}
.amro-learning-streak > div i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
}
.amro-learning-streak > div span[data-active="true"] i {
  color: var(--amro-on-accent);
  background: var(--amro-accent-teal);
}
.amro-badge-toast {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  max-width: 560px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 45%, var(--amro-border));
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-badge-toast > span:first-child {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}
.amro-badge-toast > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-badge-toast small {
  color: var(--amro-foreground-muted);
}
.amro-badge-toast > button:last-child {
  border: 0;
  color: inherit;
  background: transparent;
}
.amro-certificate-card {
  overflow: hidden;
  padding: 0;
}
.amro-certificate-card__preview {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  padding: var(--amro-space-6);
  text-align: center;
  background: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--amro-accent-cyan) 14%, transparent),
    transparent 54%
  );
}
.amro-certificate-card__preview > span:first-child {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid var(--amro-accent-cyan);
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
}
.amro-certificate-card__preview h3 {
  margin: var(--amro-space-2) 0;
  font-size: var(--amro-text-xl);
}
.amro-certificate-card__preview p {
  margin: 0;
}
.amro-certificate-card__preview small {
  color: var(--amro-foreground-muted);
}
.amro-certificate-card footer {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
}
.amro-certificate-card footer > div {
  display: flex;
}
.amro-language-switcher .amro-feature-panel__body > div {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-language-switcher label {
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3) 0;
}
.amro-language-switcher label > span {
  display: grid;
}
.amro-language-switcher select {
  min-width: 140px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-hands-free {
  display: grid;
  gap: var(--amro-space-5);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-hands-free header {
  display: flex;
  justify-content: space-between;
}
.amro-hands-free header > span {
  display: grid;
}
.amro-hands-free small {
  color: var(--amro-foreground-muted);
}
.amro-hands-free > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-3);
}
.amro-hands-free > div button {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  min-height: 110px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-hands-free > div button:nth-child(2),
.amro-hands-free > div button[data-active="true"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
  box-shadow: var(--amro-glow-active-ai);
}
.amro-hands-free > div svg {
  width: 30px;
  height: 30px;
}
.amro-learning-context {
  margin: 0;
  border: 0;
  padding: 0;
}
.amro-learning-context legend {
  margin-bottom: var(--amro-space-3);
  font-weight: var(--amro-font-strong);
}
.amro-learning-context > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-2);
}
.amro-learning-context label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-learning-context label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-learning-context input {
  position: absolute;
  opacity: 0;
}
.amro-learning-context label > span:nth-child(2) {
  color: var(--amro-accent-cyan);
}
.amro-learning-context label > span:last-child {
  display: grid;
}
.amro-learning-context small {
  color: var(--amro-foreground-muted);
}
.amro-offline-lesson header > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-offline-lesson > div {
  display: grid;
  grid-template-columns: 1fr auto;
}
.amro-offline-lesson footer {
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-offline-lesson footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-tutor-memory .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-tutor-memory ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-tutor-memory li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3) 0;
}
.amro-tutor-memory li > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-tutor-memory li > span:nth-child(2) {
  display: grid;
}
.amro-tutor-memory small {
  color: var(--amro-foreground-muted);
}
.amro-tutor-memory li button {
  border: 0;
  color: var(--amro-foreground-muted);
  background: transparent;
}
.amro-learning-goal {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-learning-goal header {
  justify-content: flex-start;
}
.amro-learning-goal header > svg {
  color: var(--amro-accent-cyan);
}
.amro-learning-goal > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-learning-goal footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-allocation-table {
  overflow-x: auto;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-allocation-table > header {
  padding: var(--amro-space-4);
}
.amro-allocation-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.amro-allocation-table th,
.amro-allocation-table td {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
  white-space: nowrap;
}
.amro-allocation-table th {
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-allocation-table td:first-child {
  display: grid;
}
.amro-allocation-table progress {
  width: 80px;
  accent-color: var(--amro-accent-teal);
}
.amro-learning-heatmap {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-learning-heatmap__grid {
  display: grid;
  gap: var(--amro-space-2);
  align-items: stretch;
  overflow-x: auto;
}
.amro-learning-heatmap__grid > strong {
  display: flex;
  align-items: center;
  min-height: 42px;
  font-size: var(--amro-text-sm);
}
.amro-learning-heatmap__grid > button {
  display: grid;
  place-items: center;
  min-height: 70px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-teal) 48%, var(--amro-border));
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-accent-teal) 12%, var(--amro-surface));
}
.amro-learning-heatmap__grid > button small {
  font-size: var(--amro-text-xs);
}
.amro-credit-pool .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-credit-pool section {
  display: grid;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-credit-pool section > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-1) var(--amro-space-2);
}
.amro-credit-pool section svg {
  grid-row: 1 / 3;
  color: var(--amro-accent-cyan);
}
.amro-credit-pool small {
  color: var(--amro-foreground-muted);
}
.amro-credit-pool progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  width: fit-content;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-1) var(--amro-space-3);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-role-badge--instructor {
  color: var(--amro-accent-cyan);
}
.amro-role-badge--organisation-admin,
.amro-role-badge--platform-admin {
  color: var(--amro-status-warning);
}
@keyframes amro-voice-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(calc(1 + var(--amro-wave-level) * 0.18));
  }
}
@media (max-width: 700px) {
  .amro-understanding-check > div,
  .amro-adaptive-path .amro-feature-panel__body > div,
  .amro-skill-radar > div,
  .amro-credit-pool .amro-feature-panel__body > div {
    grid-template-columns: 1fr;
  }
  .amro-confidence-selector > div {
    grid-template-columns: repeat(2, 1fr);
  }
  .amro-course-composer .amro-feature-panel__body > div,
  .amro-learning-goal > div {
    grid-template-columns: 1fr;
  }
  .amro-course-composer .amro-feature-panel__body > div > .amro-field {
    grid-column: auto;
  }
  .amro-course-composer footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-course-composer footer .amro-button {
    margin-left: 0;
  }
  .amro-hands-free > div,
  .amro-learning-context > div {
    grid-template-columns: 1fr 1fr;
  }
  .amro-badge-toast {
    grid-template-columns: auto 1fr;
  }
  .amro-badge-toast .amro-button,
  .amro-badge-toast > button:last-child {
    grid-column: 1 / -1;
  }
  .amro-learning-heatmap > header {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amro-voice-tutor-orb > div > span,
  .amro-ask-tutor__pulse {
    animation: none;
  }
}

@keyframes amro-skeleton-progress {
  to {
    transform: translateX(100%);
  }
}

.amro-issue-composer,
.amro-agent-activity,
.amro-live-outcome,
.amro-human-loop {
  width: min(100%, 720px);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}

.amro-issue-composer {
  display: grid;
  gap: var(--amro-space-5);
  padding: var(--amro-space-5);
}

.amro-issue-composer > header,
.amro-agent-activity > header,
.amro-issue-composer > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-4);
}

.amro-issue-composer > header > div,
.amro-agent-activity > header > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-issue-composer label,
.amro-issue-composer fieldset {
  display: grid;
  gap: var(--amro-space-2);
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}

.amro-issue-composer select,
.amro-issue-composer textarea {
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  font-weight: var(--amro-font-body);
  resize: vertical;
}

.amro-segmented-field {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-1);
  background: var(--amro-surface-muted);
}

.amro-segmented-field button {
  border: 0;
  border-radius: calc(var(--amro-radius-control) - 2px);
  padding: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--amro-text-xs);
  text-transform: capitalize;
}

.amro-segmented-field button[aria-pressed="true"] {
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
  box-shadow: inset 0 0 0 1px var(--amro-accent-cyan);
}

.amro-attachment-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-3);
}

.amro-attachment-row > button,
.amro-check-row {
  display: flex !important;
  align-items: center;
  gap: var(--amro-space-3) !important;
  border: 1px dashed var(--amro-border) !important;
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) !important;
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.amro-attachment-row svg {
  flex: 0 0 auto;
  width: 20px;
  color: var(--amro-accent-cyan);
}

.amro-attachment-row span,
.amro-check-row span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-attachment-row small,
.amro-check-row small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-body);
}

.amro-check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--amro-accent-teal);
}

.amro-issue-composer > footer > span {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-issue-composer > footer svg {
  width: 15px;
}

.amro-powered-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--amro-space-3);
  width: 100%;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-powered-footer a,
.amro-powered-footer button {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-1);
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.amro-powered-footer svg {
  width: 13px;
  color: var(--amro-accent-cyan);
}

.amro-agent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
}

.amro-agent-row__copy,
.amro-agent-row__copy > span:first-child {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-width: 0;
}

.amro-agent-row__copy {
  align-items: stretch;
  flex-direction: column;
  gap: var(--amro-space-1);
}

.amro-agent-row__copy > span:nth-child(2),
.amro-agent-row__copy small {
  overflow: hidden;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amro-agent-row__progress {
  overflow: hidden;
  height: 3px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}

.amro-agent-row__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-agent-row > button {
  border: 0;
  color: var(--amro-accent-cyan);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--amro-text-xs);
}

.amro-agent-team {
  width: min(100%, 720px);
}
.amro-agent-team__list {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-agent-outcomes {
  width: min(100%, 720px);
}

.amro-live-outcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-4);
  padding: var(--amro-space-4);
}

.amro-live-outcome__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 14%, transparent);
}

.amro-live-outcome > span:nth-child(2),
.amro-live-outcome > span:nth-child(3) {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-live-outcome > span:nth-child(2) small,
.amro-live-outcome time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-agent-activity {
  overflow: hidden;
}
.amro-agent-activity > header {
  padding: var(--amro-space-4);
  border-bottom: 1px solid var(--amro-border);
}
.amro-agent-activity ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-agent-activity li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  padding: var(--amro-space-3) var(--amro-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--amro-border) 60%, transparent);
}
.amro-agent-activity li:last-child {
  border-bottom: 0;
}
.amro-agent-activity__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-agent-activity__icon svg {
  width: 16px;
}
.amro-agent-activity li > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-agent-activity li small,
.amro-agent-activity time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-agent-activity li > button {
  border: 0;
  color: var(--amro-accent-cyan);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--amro-text-xs);
}

.amro-control-boundary {
  width: min(100%, 760px);
}
.amro-control-boundary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--amro-space-3);
}
.amro-control-boundary article {
  display: grid;
  align-content: start;
  gap: var(--amro-space-2);
  min-height: 180px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-control-boundary article > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-control-boundary article > span:first-child svg {
  width: 19px;
}
.amro-control-boundary article small {
  min-height: 36px;
  color: var(--amro-foreground-muted);
}

.amro-trusted-knowledge {
  width: min(100%, 760px);
}
.amro-trusted-knowledge__list {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-trusted-knowledge__list > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  text-align: left;
}
.amro-trusted-knowledge__list > button:not(:disabled) {
  cursor: pointer;
}
.amro-trusted-knowledge__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 10%, transparent);
}
.amro-trusted-knowledge__icon svg {
  width: 17px;
}
.amro-trusted-knowledge__list > button > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-trusted-knowledge__list small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-human-loop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-4);
  border-color: color-mix(in srgb, var(--amro-accent-cyan) 42%, var(--amro-border));
  padding: var(--amro-space-4);
  background: color-mix(in srgb, var(--amro-accent-cyan) 5%, var(--amro-surface));
}

.amro-human-loop__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, transparent);
}
.amro-human-loop > span:nth-child(2),
.amro-human-loop > span:nth-child(3) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-human-loop small,
.amro-human-loop > span:nth-child(3) > span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-human-loop > span:nth-child(3) > span {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-human-loop > span:nth-child(3) svg {
  width: 13px;
}
.amro-human-loop--compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--amro-space-3);
}
.amro-human-loop--compact > span:nth-child(3) {
  display: none;
}

@media (max-width: 720px) {
  .amro-form-grid,
  .amro-attachment-row,
  .amro-control-boundary__grid {
    grid-template-columns: 1fr;
  }
  .amro-issue-composer > header,
  .amro-issue-composer > footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-agent-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .amro-agent-row > button {
    grid-column: 2 / -1;
    justify-self: start;
  }
  .amro-live-outcome,
  .amro-human-loop {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .amro-live-outcome > span:nth-child(3),
  .amro-live-outcome > .amro-button,
  .amro-human-loop > span:nth-child(3),
  .amro-human-loop > .amro-button {
    grid-column: 2;
    justify-self: start;
  }
  .amro-trusted-knowledge__list > button {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .amro-trusted-knowledge__list > button > .amro-badge,
  .amro-trusted-knowledge__list > button > .amro-status-indicator {
    grid-column: 2;
    justify-self: start;
  }
}

.amro-step-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amro-step-rail li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--amro-space-2);
  align-items: start;
  position: relative;
}

.amro-step-rail li:not(:last-child)::after {
  content: "";
  height: 1px;
  background: var(--amro-border);
  position: absolute;
  top: 15px;
  left: 30px;
  right: calc(var(--amro-space-3) * -1);
}

.amro-step-rail__marker {
  display: grid;
  place-items: center;
  z-index: 1;
  width: 30px;
  height: 30px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-strong);
}

.amro-step-rail__marker svg {
  width: 15px;
}
.amro-step-rail__marker[data-status="active"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
  box-shadow: var(--amro-shadow-ai-glow);
}
.amro-step-rail__marker[data-status="complete"] {
  border-color: var(--amro-accent-teal);
  color: var(--amro-canvas);
  background: var(--amro-accent-teal);
}
.amro-step-rail__marker[data-status="blocked"],
.amro-step-rail__marker[data-status="error"] {
  border-style: dashed;
}
.amro-step-rail__copy {
  display: grid;
  gap: var(--amro-space-1);
  padding-top: var(--amro-space-1);
}
.amro-step-rail__copy small {
  color: var(--amro-foreground-muted);
}
.amro-step-rail--vertical {
  grid-template-columns: 1fr;
}
.amro-step-rail--vertical li:not(:last-child)::after {
  width: 1px;
  height: auto;
  top: 30px;
  bottom: calc(var(--amro-space-3) * -1);
  left: 15px;
  right: auto;
}

.amro-booking-calendar {
  width: min(100%, 430px);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-booking-calendar > header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: var(--amro-space-2);
  margin-bottom: var(--amro-space-4);
  text-align: center;
}
.amro-booking-calendar > header button {
  display: grid;
  place-items: center;
  height: 36px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: transparent;
  cursor: pointer;
}
.amro-booking-calendar > header svg {
  width: 17px;
}
.amro-booking-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--amro-space-1);
}
.amro-booking-calendar__grid > span {
  padding-block: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  text-align: center;
}
.amro-booking-calendar__grid > button {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.amro-booking-calendar__grid > button:hover:not(:disabled),
.amro-booking-calendar__grid > button:focus-visible {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-booking-calendar__grid > button[aria-selected="true"] {
  color: var(--amro-canvas);
  background: var(--amro-accent-teal);
}
.amro-booking-calendar__grid > button:disabled {
  color: color-mix(in srgb, var(--amro-foreground-muted) 45%, transparent);
  cursor: not-allowed;
}

.amro-compare {
  display: grid;
  width: min(100%, 640px);
  gap: var(--amro-space-4);
}
.amro-compare__canvas {
  min-height: 290px;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface-muted);
  position: relative;
}
.amro-compare__before,
.amro-compare__after {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--amro-space-6);
  position: absolute;
  inset: 0;
}
.amro-compare__after {
  color: var(--amro-canvas);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-compare__before .amro-badge,
.amro-compare__after .amro-badge {
  position: absolute;
  top: var(--amro-space-3);
  left: var(--amro-space-3);
}
.amro-compare__divider {
  width: 2px;
  height: 100%;
  background: var(--amro-foreground);
  position: absolute;
  top: 0;
  transform: translateX(-1px);
}
.amro-compare label {
  display: grid;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-compare input {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}

.amro-availability__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--amro-space-2);
}
.amro-availability button {
  display: grid;
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  cursor: pointer;
  font: inherit;
}
.amro-availability button span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-availability button[aria-pressed="true"] {
  border-color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 12%, var(--amro-surface));
  box-shadow: inset 0 0 0 1px var(--amro-accent-teal);
}

.amro-publication-gate ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0 0 var(--amro-space-4);
  padding: 0;
  list-style: none;
}
.amro-signature-flow {
  width: min(100%, 760px);
}
.amro-signature-flow .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-5);
}
.amro-signature-flow__hero {
  display: flex;
  align-items: center;
  gap: var(--amro-space-4);
}
.amro-signature-flow__hero > div:last-child,
.amro-approval-summary span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-signature-flow__hero span,
.amro-approval-summary small {
  color: var(--amro-foreground-muted);
}
.amro-approval-summary {
  display: flex;
  gap: var(--amro-space-3);
  align-items: center;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-approval-summary > svg {
  flex: 0 0 auto;
  color: var(--amro-accent-teal);
}
.amro-lesson-player {
  display: grid;
  place-items: center;
  gap: var(--amro-space-4);
  padding: var(--amro-space-6);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface-muted);
}
.amro-signature-flow blockquote {
  margin: 0;
  border-left: 3px solid var(--amro-accent-cyan);
  padding-left: var(--amro-space-4);
  color: var(--amro-foreground-muted);
}
.amro-signature-flow mark {
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-accent-cyan) 16%, transparent);
}
.amro-generated-asset {
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--amro-radius-card);
  color: var(--amro-canvas);
  background:
    radial-gradient(circle at 70% 20%, var(--amro-accent-cyan), transparent 32%),
    linear-gradient(145deg, var(--amro-accent-teal), var(--amro-foreground));
}

@media (max-width: 640px) {
  .amro-step-rail {
    grid-template-columns: 1fr;
  }
  .amro-step-rail li:not(:last-child)::after {
    width: 1px;
    height: auto;
    top: 30px;
    bottom: calc(var(--amro-space-3) * -1);
    left: 15px;
    right: auto;
  }
  .amro-booking-calendar {
    padding: var(--amro-space-3);
  }
  .amro-booking-calendar__grid {
    gap: 0;
  }
}

@keyframes amro-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(2px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amro-button,
  .amro-tooltip,
  .amro-skeleton::after {
    animation: none;
    transition-duration: 1ms;
  }
}

/* Shared application-system components */
.amro-app-header,
.amro-product-identity,
.amro-live-pulse,
.amro-credit-balance,
.amro-approval-notice,
.amro-toast,
.amro-context-drawer,
.amro-command-palette,
.amro-audit-log,
.amro-activity-timeline,
.amro-product-preview,
.amro-process-diagram,
.amro-gallery-viewer {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-6);
  min-height: 68px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-3) var(--amro-space-5);
  background: color-mix(in srgb, var(--amro-surface) 90%, transparent);
  box-shadow: var(--amro-shadow-control);
}

.amro-app-header__brand,
.amro-app-header nav,
.amro-app-header__actions,
.amro-product-identity,
.amro-credit-balance,
.amro-approval-notice,
.amro-toast,
.amro-embedded-booking .amro-feature-panel__footer,
.amro-error-recovery .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-app-header__brand {
  min-width: 0;
  color: inherit;
  font-weight: var(--amro-font-strong);
  text-decoration: none;
}

.amro-app-header__brand svg {
  width: 112px;
  height: auto;
}
.amro-app-header__brand > span {
  padding-left: var(--amro-space-3);
  border-left: 1px solid var(--amro-border);
}
.amro-app-header nav {
  justify-content: center;
}
.amro-app-header nav a {
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: var(--amro-foreground-muted);
  text-decoration: none;
}
.amro-app-header nav a[aria-current="page"] {
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
}
.amro-app-header__actions {
  justify-content: flex-end;
}
.amro-app-header__menu {
  display: none;
}

.amro-app-header button,
.amro-product-preview button,
.amro-gallery-viewer button,
.amro-process-diagram button,
.amro-credit-balance,
.amro-toast button,
.amro-command-palette button,
.amro-context-drawer button,
.amro-audit-log button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.amro-product-identity {
  min-width: 0;
}
.amro-product-identity__mark,
.amro-metric-tile__icon,
.amro-empty-state > span:first-child {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, transparent);
}
.amro-product-identity > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
  min-width: 0;
  margin-right: auto;
}
.amro-product-identity small {
  color: var(--amro-foreground-muted);
}

.amro-talk-now {
  position: relative;
}
.amro-talk-now__pulse,
.amro-live-pulse > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: currentColor;
  box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
  animation: amro-shared-pulse var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}
.amro-talk-now__pulse {
  color: var(--amro-on-accent);
}
.amro-live-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  width: fit-content;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-1) var(--amro-space-3);
  color: var(--amro-status-success);
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-strong);
}
.amro-live-pulse--processing {
  color: var(--amro-accent-cyan);
}
.amro-live-pulse--paused {
  color: var(--amro-foreground-muted);
}
.amro-live-pulse--paused > span:first-child {
  animation: none;
}

.amro-metric-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2) var(--amro-space-3);
  min-width: 190px;
}
.amro-metric-tile > span:nth-child(2) {
  align-self: center;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-metric-tile > strong {
  grid-column: 1 / -1;
  font-size: var(--amro-text-xl);
  font-variant-numeric: tabular-nums;
}
.amro-metric-tile > small {
  grid-column: 1 / -1;
  color: var(--amro-status-success);
}
.amro-metric-tile > small[data-trend="down"] {
  color: var(--amro-status-danger);
}
.amro-metric-tile > small[data-trend="neutral"] {
  color: var(--amro-foreground-muted);
}

.amro-process-diagram {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-process-diagram > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--amro-space-4) var(--amro-space-5);
  font-weight: var(--amro-font-strong);
}
.amro-process-diagram > button > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-process-diagram > button[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}
.amro-process-diagram ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--amro-space-3);
  margin: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-5);
  list-style: none;
}
.amro-process-diagram li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-process-diagram li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
}
.amro-process-diagram li[data-status="complete"] > span:first-child {
  color: var(--amro-status-success);
}
.amro-process-diagram li[data-status="active"] > span:first-child {
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}
.amro-process-diagram li > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-process-diagram li small {
  color: var(--amro-foreground-muted);
}

.amro-product-preview {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-background);
  box-shadow: var(--amro-shadow-card);
}
.amro-product-preview > header {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  min-height: 46px;
  border-bottom: 1px solid var(--amro-border);
  padding: 0 var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-product-preview > header > span:first-child {
  display: flex;
  gap: var(--amro-space-1);
}
.amro-product-preview > header i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-product-preview__url {
  margin-inline: auto;
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-1) var(--amro-space-4);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-product-preview__canvas {
  min-height: 280px;
  padding: var(--amro-space-5);
}
.amro-product-preview__starter {
  display: grid;
  gap: var(--amro-space-3);
  width: min(100%, 460px);
  border: 1px solid color-mix(in srgb, var(--amro-border) 56%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-6);
  background: color-mix(in srgb, var(--amro-surface) 78%, transparent);
  box-shadow: var(--amro-shadow-card);
}
.amro-product-preview__starter > strong {
  color: var(--amro-foreground);
  font-size: var(--amro-text-xl);
}
.amro-product-preview__starter > p {
  margin: 0;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
  line-height: var(--amro-leading-body);
}
.amro-product-preview__starter > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--amro-space-2);
  border-top: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  padding-top: var(--amro-space-3);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-product-preview__starter b {
  color: var(--amro-accent-teal);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-lg);
}

.amro-gallery-viewer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 480px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-4);
  background: var(--amro-canvas);
}
.amro-gallery-viewer > header,
.amro-gallery-viewer > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-gallery-viewer figure {
  display: grid;
  place-items: center;
  gap: var(--amro-space-3);
  margin: 0;
  padding: var(--amro-space-4);
}
.amro-gallery-viewer img {
  max-width: 100%;
  max-height: 58vh;
  border-radius: var(--amro-radius-card);
  object-fit: contain;
}
.amro-gallery-viewer figcaption {
  color: var(--amro-foreground-muted);
}
.amro-gallery-viewer footer > div {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-gallery-viewer footer > div button {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-gallery-viewer footer > div button[aria-current="true"] {
  background: var(--amro-accent-cyan);
  box-shadow: 0 0 8px var(--amro-accent-cyan);
}

.amro-feature-proof .amro-feature-panel__body > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-feature-proof .amro-feature-panel__body strong {
  font-size: var(--amro-text-lg);
}
.amro-feature-proof .amro-feature-panel__body span {
  color: var(--amro-foreground-muted);
}
.amro-credit-balance {
  min-height: 36px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: 0 var(--amro-space-3);
  background: var(--amro-surface);
}
.amro-credit-balance svg:first-child {
  color: var(--amro-accent-cyan);
}
.amro-credit-balance span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-credit-balance--low {
  border-color: var(--amro-status-warning);
}

.amro-approval-notice {
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--amro-status-warning) 45%, var(--amro-border));
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: color-mix(in srgb, var(--amro-status-warning) 7%, var(--amro-surface));
}
.amro-approval-notice > svg {
  color: var(--amro-status-warning);
}
.amro-approval-notice > span:nth-child(2) {
  display: grid;
  flex: 1 1 240px;
  gap: var(--amro-space-1);
}
.amro-approval-notice small {
  color: var(--amro-foreground-muted);
}
.amro-embedded-booking .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-embedded-booking .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-2);
}
.amro-embedded-booking .amro-feature-panel__body > div button {
  min-height: 40px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-embedded-booking .amro-feature-panel__body > div button[aria-pressed="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-background));
}
.amro-embedded-booking .amro-feature-panel__footer {
  color: var(--amro-foreground-muted);
}

.amro-toast {
  max-width: 420px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) var(--amro-space-4);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-toast > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-status-success);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.amro-toast--error > span:first-child {
  color: var(--amro-status-danger);
}
.amro-toast--warning > span:first-child {
  color: var(--amro-status-warning);
}
.amro-toast > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-toast small {
  color: var(--amro-foreground-muted);
}

.amro-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-3);
  border: 1px dashed var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-6);
  color: var(--amro-foreground);
  text-align: center;
  font-family: var(--amro-font-sans);
}
.amro-empty-state p {
  max-width: 46ch;
  margin: 0;
  color: var(--amro-foreground-muted);
}
.amro-empty-state > div {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-skeleton-card {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-skeleton-card__media {
  height: 160px;
  border-radius: var(--amro-radius-control-lg);
}
.amro-skeleton-card__title {
  width: 58%;
  height: 24px;
}
.amro-skeleton-card__row {
  height: 14px;
}
.amro-skeleton-card__row:last-child {
  width: 72%;
}

.amro-command-palette {
  overflow: hidden;
  max-width: 640px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-command-palette > header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
}
.amro-command-palette input {
  border: 0;
  outline: 0;
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
}
.amro-command-palette kbd {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-1) var(--amro-space-2);
  color: var(--amro-foreground-muted);
  background: var(--amro-background);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-command-palette [role="listbox"] {
  display: grid;
  gap: var(--amro-space-1);
  max-height: 360px;
  overflow: auto;
  padding: var(--amro-space-2);
}
.amro-command-palette [role="option"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-command-palette [role="option"]:hover {
  background: var(--amro-surface-muted);
}
.amro-command-palette [role="option"] > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-command-palette small {
  color: var(--amro-foreground-muted);
}

.amro-context-drawer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(100%, 380px);
  min-height: 460px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-context-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-4);
}
.amro-context-drawer > header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-context-drawer small {
  color: var(--amro-foreground-muted);
}
.amro-context-drawer__body {
  overflow: auto;
  padding: var(--amro-space-4);
}
.amro-context-drawer > footer {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-4);
}

.amro-activity-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  list-style: none;
}
.amro-activity-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
  min-height: 66px;
}
.amro-activity-timeline li::before {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 14px;
  width: 1px;
  background: var(--amro-border);
  content: "";
}
.amro-activity-timeline li:last-child::before {
  display: none;
}
.amro-activity-timeline li > span:first-child {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
}
.amro-activity-timeline li[data-status="complete"] > span:first-child {
  color: var(--amro-status-success);
}
.amro-activity-timeline li[data-status="active"] > span:first-child {
  color: var(--amro-accent-cyan);
  box-shadow: var(--amro-glow-active-ai);
}
.amro-activity-timeline li > span:nth-child(2) {
  display: grid;
  align-content: start;
  gap: var(--amro-space-1);
}
.amro-activity-timeline small,
.amro-activity-timeline time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-activity-timeline time {
  font-variant-numeric: tabular-nums;
}

.amro-audit-log {
  overflow-x: auto;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-audit-log table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.amro-audit-log caption {
  padding: var(--amro-space-4);
  font-weight: var(--amro-font-strong);
  text-align: left;
}
.amro-audit-log th,
.amro-audit-log td {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
  white-space: nowrap;
}
.amro-audit-log th {
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-audit-log button {
  color: var(--amro-accent-cyan);
}
.amro-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@keyframes amro-shared-pulse {
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (max-width: 720px) {
  .amro-app-header {
    grid-template-columns: auto 1fr auto;
    gap: var(--amro-space-3);
  }
  .amro-app-header__menu {
    display: inline-grid;
    place-items: center;
  }
  .amro-app-header nav {
    display: none;
  }
  .amro-app-header__brand svg {
    width: 94px;
  }
  .amro-process-diagram ol {
    grid-template-columns: 1fr;
  }
  .amro-process-diagram li > svg {
    transform: rotate(90deg);
  }
  .amro-product-preview__url {
    display: none;
  }
  .amro-audit-log {
    border-radius: var(--amro-radius-control-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amro-talk-now__pulse,
  .amro-live-pulse > span:first-child {
    animation: none;
  }
}

/* AmroGen sales workflow */
.amro-sales-brief,
.amro-named-account,
.amro-audience-signal,
.amro-prospect-company,
.amro-decision-maker,
.amro-prospect-stack,
.amro-lead-fit,
.amro-fit-popover {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-sales-brief__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}
.amro-sales-brief__grid .amro-field:nth-child(2),
.amro-sales-brief__grid .amro-field:nth-child(5) {
  grid-column: 1 / -1;
}
.amro-sales-brief__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-4);
  margin-top: var(--amro-space-5);
}
.amro-sales-brief__footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-icp-builder .amro-feature-panel__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--amro-space-5);
}
.amro-icp-builder section {
  min-width: 0;
}
.amro-icp-builder h3 {
  margin: 0 0 var(--amro-space-3);
  font-size: var(--amro-text-sm);
}
.amro-icp-builder section > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-icp-builder section span {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-1) var(--amro-space-2) var(--amro-space-1) var(--amro-space-3);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-icp-builder section button,
.amro-fit-popover button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.amro-icp-builder section button {
  display: grid;
  place-items: center;
  padding: 0;
}
.amro-icp-builder__add {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  gap: var(--amro-space-2);
  padding-top: var(--amro-space-3);
  border-top: 1px solid var(--amro-border);
}

.amro-named-account {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--amro-space-3);
}
.amro-named-account > .amro-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  padding: var(--amro-space-4);
}
.amro-named-account > .amro-card > svg {
  color: var(--amro-accent-cyan);
}
.amro-named-account > .amro-card > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-named-account small {
  color: var(--amro-foreground-muted);
}

.amro-audience-signal {
  display: inline-flex;
}
.amro-audience-signal > button {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-height: 34px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: 0 var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font: inherit;
  cursor: pointer;
}
.amro-audience-signal[data-selected="true"] > button {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
}
.amro-audience-signal svg {
  color: var(--amro-accent-cyan);
}
.amro-audience-signal small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  text-transform: capitalize;
}

.amro-prospect-company {
  display: grid;
  gap: var(--amro-space-4);
  transition: border-color var(--amro-duration-state) var(--amro-ease-standard);
}
.amro-prospect-company--selected {
  border-color: var(--amro-accent-cyan);
}
.amro-prospect-company header,
.amro-decision-maker header,
.amro-decision-maker footer {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-prospect-company header > span,
.amro-decision-maker header > span {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-prospect-company small,
.amro-decision-maker small {
  color: var(--amro-foreground-muted);
}
.amro-prospect-company__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-4);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-prospect-company__meta span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-prospect-company__fit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-prospect-company__fit > span {
  display: flex;
  align-items: baseline;
  gap: var(--amro-space-1);
}
.amro-prospect-company__fit > span strong {
  font-size: var(--amro-text-xl);
  font-variant-numeric: tabular-nums;
}
.amro-prospect-company meter,
.amro-lead-fit meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-prospect-company ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  background: var(--amro-surface-muted);
  list-style: none;
}
.amro-prospect-company li {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-prospect-company li svg {
  color: var(--amro-status-success);
}

.amro-decision-maker {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-decision-maker p {
  margin: 0;
  color: var(--amro-foreground-muted);
  line-height: var(--amro-leading-body);
}
.amro-decision-maker footer {
  justify-content: flex-end;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}

.amro-prospect-stack {
  position: relative;
  display: grid;
  gap: var(--amro-space-3);
  isolation: isolate;
}
.amro-prospect-stack__depth {
  position: absolute;
  z-index: -1;
  inset: var(--amro-space-3) var(--amro-space-4) calc(var(--amro-space-3) * -1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface-muted);
}
.amro-prospect-stack > footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-2);
  padding: var(--amro-space-2) var(--amro-space-4) 0;
}
.amro-prospect-stack > footer > span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-lead-fit {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-lead-fit > button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-4);
  width: 100%;
  border: 0;
  padding: var(--amro-space-4);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.amro-lead-fit > button > span:nth-child(2),
.amro-lead-fit li > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-lead-fit small {
  color: var(--amro-foreground-muted);
}
.amro-lead-fit__ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--amro-radius-full);
  background:
    radial-gradient(circle, var(--amro-surface) 58%, transparent 60%),
    conic-gradient(var(--amro-accent-teal) var(--amro-fit-score), var(--amro-surface-muted) 0);
}
.amro-lead-fit__ring strong {
  grid-area: 1 / 1;
  font-size: var(--amro-text-lg);
}
.amro-lead-fit__ring small {
  grid-area: 2 / 1;
  margin-top: calc(var(--amro-space-5) * -1);
  font-size: var(--amro-text-xs);
}
.amro-lead-fit ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-4);
  list-style: none;
}
.amro-lead-fit li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(100px, 2fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-fit-popover {
  position: relative;
  width: fit-content;
}
.amro-fit-popover [role="dialog"] {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--amro-space-2));
  width: min(360px, 88vw);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-fit-popover [role="dialog"] header {
  display: flex;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-fit-popover ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: var(--amro-space-4) 0;
  padding: 0;
  list-style: none;
}
.amro-fit-popover li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-fit-popover li > svg {
  color: var(--amro-status-success);
}
.amro-fit-popover li > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-fit-popover small {
  color: var(--amro-foreground-muted);
}

@media (max-width: 640px) {
  .amro-sales-brief__grid,
  .amro-icp-builder .amro-feature-panel__body {
    grid-template-columns: 1fr;
  }
  .amro-sales-brief__grid .amro-field {
    grid-column: auto;
  }
  .amro-sales-brief__footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-icp-builder__add {
    grid-template-columns: 1fr;
  }
  .amro-named-account {
    grid-template-columns: 1fr;
  }
  .amro-named-account > .amro-card {
    grid-template-columns: auto 1fr;
  }
  .amro-named-account > .amro-card .amro-badge,
  .amro-named-account > .amro-card .amro-button {
    grid-column: 1 / -1;
  }
  .amro-prospect-stack > footer {
    grid-template-columns: 1fr 1fr;
  }
  .amro-prospect-stack > footer > span {
    grid-column: 1 / -1;
  }
}
```



## Usage

Shared runtime files installed automatically with every AmroUI component.