/* NanoUI — Combined styles for docs preview */

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Colors */
:root {
  --color-background:       0 0% 100%;
  --color-foreground:        240 10% 3.9%;
  --color-muted:             240 4.8% 95.9%;
  --color-muted-foreground:  240 3.8% 40%;
  --color-border:            240 5.9% 90%;
  --color-ring:              240 5.9% 10%;
  --color-primary:           220 70% 50%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary:         240 4.8% 95.9%;
  --color-secondary-foreground: 240 5.9% 10%;
  --color-destructive:       0 84.2% 60.2%;
  --color-destructive-foreground: 0 0% 98%;
  --color-success:           142 76% 36%;
  --color-success-foreground: 0 0% 100%;
  --color-warning:           38 92% 50%;
  --color-warning-foreground: 0 0% 100%;
  --color-card:              0 0% 100%;
  --color-card-foreground:   240 10% 3.9%;
  --color-popover:           0 0% 100%;
  --color-popover-foreground: 240 10% 3.9%;
  --color-input:             240 5.9% 90%;
  --color-input-focus:       220 70% 50%;
}

.dark {
  --color-background:        240 10% 3.9%;
  --color-foreground:         0 0% 98%;
  --color-muted:              240 3.7% 15.9%;
  --color-muted-foreground:   240 5% 64.9%;
  --color-border:             240 3.7% 15.9%;
  --color-ring:               240 4.9% 83.9%;
  --color-primary:            220 70% 60%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary:          240 3.7% 15.9%;
  --color-secondary-foreground: 0 0% 98%;
  --color-destructive:        0 62.8% 30.6%;
  --color-destructive-foreground: 0 0% 98%;
  --color-card:               240 10% 3.9%;
  --color-card-foreground:    0 0% 98%;
  --color-popover:            240 10% 3.9%;
  --color-popover-foreground: 0 0% 98%;
  --color-input:              240 3.7% 15.9%;
}

/* Typography */
:root {
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --font-normal:  400;
  --font-medium:  500;
  --font-semibold: 600;
  --font-bold:    700;
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.025em;
}

/* Spacing */
:root {
  --space-0:   0;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --space-2:   0.5rem;
  --space-2-5: 0.625rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
}

/* Radius */
:root {
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;
}

/* Shadows */
:root {
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Transitions */
:root {
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Z-index */
:root {
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-popover:   400;
  --z-tooltip:   500;
  --z-toast:     600;
}

/* Globals */
body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ============================================
   Component styles (scoped to .docs-preview)
   ============================================ */

/* Button */
.docs-preview .nano-btn,
.docs-preview button,
.docs-preview input[type="submit"],
.docs-preview input[type="button"],
.docs-preview input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
  padding: var(--space-2-5) var(--space-4);
  background-color: hsl(var(--color-primary));
  color: hsl(var(--color-primary-foreground));
}

.docs-preview .nano-btn:hover,
.docs-preview button:hover,
.docs-preview input[type="submit"]:hover,
.docs-preview input[type="button"]:hover,
.docs-preview input[type="reset"]:hover {
  background-color: hsl(var(--color-primary) / 0.9);
}

.docs-preview .nano-btn:focus-visible,
.docs-preview button:focus-visible,
.docs-preview input[type="submit"]:focus-visible,
.docs-preview input[type="button"]:focus-visible,
.docs-preview input[type="reset"]:focus-visible {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: 2px;
}

.docs-preview .nano-btn:disabled,
.docs-preview .nano-btn[aria-disabled="true"],
.docs-preview button:disabled,
.docs-preview button[aria-disabled="true"],
.docs-preview input[type="submit"]:disabled,
.docs-preview input[type="button"]:disabled,
.docs-preview input[type="reset"]:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.docs-preview .nano-btn--primary {
  background-color: hsl(var(--color-primary));
  color: hsl(var(--color-primary-foreground));
}
.docs-preview .nano-btn--primary:hover {
  background-color: hsl(var(--color-primary) / 0.9);
}

.docs-preview .nano-btn--secondary {
  background-color: hsl(var(--color-secondary));
  color: hsl(var(--color-secondary-foreground));
  border: 1px solid hsl(var(--color-border));
}
.docs-preview .nano-btn--secondary:hover {
  background-color: hsl(var(--color-muted-foreground) / 0.15);
}

.docs-preview .nano-btn--destructive {
  background-color: hsl(var(--color-destructive));
  color: hsl(var(--color-destructive-foreground));
}
.docs-preview .nano-btn--destructive:hover {
  background-color: hsl(var(--color-destructive) / 0.9);
}

.docs-preview .nano-btn--outline {
  border: 1px solid hsl(var(--color-border));
  background-color: transparent;
  color: hsl(var(--color-foreground));
}
.docs-preview .nano-btn--outline:hover {
  background-color: hsl(var(--color-muted));
}

.docs-preview .nano-btn--ghost {
  background-color: transparent;
  color: hsl(var(--color-foreground));
}
.docs-preview .nano-btn--ghost:hover {
  background-color: hsl(var(--color-muted));
}

.docs-preview .nano-btn--link {
  background-color: transparent;
  color: hsl(var(--color-primary));
  text-decoration: underline dashed;
  text-underline-offset: 4px;
  padding: 0;
}
.docs-preview .nano-btn--link:hover {
  background-color: transparent;
  text-decoration-style: solid;
}

.docs-preview .nano-btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.docs-preview .nano-btn--lg {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
}

.docs-preview .nano-btn--icon {
  padding: var(--space-2-5);
  aspect-ratio: 1;
}

.docs-preview .nano-btn__spinner {
  animation: nano-spin 1s linear infinite;
}

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

.docs-preview .nano-btn svg,
.docs-preview button svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Input */
.docs-preview .nano-input,
.docs-preview input[type="text"],
.docs-preview input[type="email"],
.docs-preview input[type="password"],
.docs-preview input[type="search"],
.docs-preview input[type="tel"],
.docs-preview input[type="url"],
.docs-preview input[type="number"],
.docs-preview input[type="date"],
.docs-preview input[type="datetime-local"],
.docs-preview input[type="month"],
.docs-preview input[type="week"],
.docs-preview input[type="time"],
.docs-preview textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-background));
  border: 1px solid hsl(var(--color-input));
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-input::placeholder,
.docs-preview input::placeholder,
.docs-preview textarea::placeholder {
  color: hsl(var(--color-muted-foreground));
}

.docs-preview .nano-input:focus,
.docs-preview input[type="text"]:focus,
.docs-preview input[type="email"]:focus,
.docs-preview input[type="password"]:focus,
.docs-preview textarea:focus {
  border-color: hsl(var(--color-input-focus));
  outline: 2px solid hsl(var(--color-input-focus));
  outline-offset: -1px;
}

.docs-preview .nano-input:disabled,
.docs-preview input:disabled,
.docs-preview textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.docs-preview .nano-input--error,
.docs-preview .nano-input[aria-invalid="true"] {
  border-color: hsl(var(--color-destructive));
}

.docs-preview .nano-input--error:focus,
.docs-preview .nano-input[aria-invalid="true"]:focus {
  border-color: hsl(var(--color-destructive));
  outline: 2px solid hsl(var(--color-destructive));
  outline-offset: -1px;
}

.docs-preview textarea.nano-input,
.docs-preview textarea {
  min-height: 5rem;
  resize: vertical;
}

.docs-preview .nano-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.docs-preview .nano-field__error {
  font-size: var(--text-sm);
  color: hsl(var(--color-destructive));
}

.docs-preview .nano-input-group {
  display: flex;
  align-items: stretch;
}
.docs-preview .nano-input-group .nano-input,
.docs-preview .nano-input-group .nano-btn {
  min-height: 2.5rem;
}
.docs-preview .nano-input-group .nano-input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.docs-preview .nano-input-group .nano-btn {
  flex: 0 0 auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Label */
.docs-preview .nano-label,
.docs-preview label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-label--required::after {
  content: " *";
  color: hsl(var(--color-destructive));
}

/* Select */
.docs-preview .nano-select,
.docs-preview select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-background));
  border: 1px solid hsl(var(--color-input));
  border-radius: var(--radius-md);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  background-size: 1rem;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-select:focus,
.docs-preview select:focus {
  border-color: hsl(var(--color-input-focus));
  outline: 2px solid hsl(var(--color-input-focus));
  outline-offset: -1px;
}

.docs-preview .nano-select:disabled,
.docs-preview select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.docs-preview .nano-select--error,
.docs-preview .nano-select[aria-invalid="true"] {
  border-color: hsl(var(--color-destructive));
}

.docs-preview .nano-select--error:focus,
.docs-preview .nano-select[aria-invalid="true"]:focus {
  border-color: hsl(var(--color-destructive));
  outline: 2px solid hsl(var(--color-destructive));
  outline-offset: -1px;
}

/* Card */
.docs-preview .nano-card {
  background-color: hsl(var(--color-card));
  color: hsl(var(--color-card-foreground));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.docs-preview .nano-card--elevated {
  border: none;
  box-shadow: var(--shadow-md);
}

.docs-preview .nano-card--bordered {
  border: 2px solid hsl(var(--color-border));
  box-shadow: none;
}

.docs-preview .nano-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-6);
  padding-bottom: 0;
}

.docs-preview .nano-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.docs-preview .nano-card__description {
  font-size: var(--text-sm);
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-card__content {
  padding: var(--space-6);
}

.docs-preview .nano-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  padding-top: 0;
}

/* Badge */
.docs-preview .nano-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.docs-preview .nano-badge svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.docs-preview .nano-badge--primary {
  background-color: hsl(var(--color-primary));
  color: hsl(var(--color-primary-foreground));
}
.docs-preview .nano-badge--secondary {
  background-color: hsl(var(--color-secondary));
  color: hsl(var(--color-secondary-foreground));
}
.docs-preview .nano-badge--destructive {
  background-color: hsl(var(--color-destructive));
  color: hsl(var(--color-destructive-foreground));
}
.docs-preview .nano-badge--success {
  background-color: hsl(var(--color-success));
  color: hsl(var(--color-success-foreground));
}
.docs-preview .nano-badge--warning {
  background-color: hsl(var(--color-warning));
  color: hsl(var(--color-warning-foreground));
}
.docs-preview .nano-badge--outline {
  background-color: transparent;
  border: 1px solid hsl(var(--color-border));
  color: hsl(var(--color-foreground));
}

/* Alert */
.docs-preview .nano-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--color-border));
  background-color: hsl(var(--color-background));
}

.docs-preview .nano-alert__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: var(--space-0-5);
}

.docs-preview .nano-alert__icon svg {
  width: 1rem;
  height: 1rem;
}

.docs-preview .nano-alert__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.docs-preview .nano-alert__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-alert__description {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-alert--destructive {
  border-color: hsl(var(--color-destructive) / 0.5);
  background-color: hsl(var(--color-destructive) / 0.08);
}
.docs-preview .nano-alert--destructive .nano-alert__icon {
  color: hsl(var(--color-destructive));
}
.docs-preview .nano-alert--destructive .nano-alert__title {
  color: hsl(var(--color-destructive));
}

.docs-preview .nano-alert--success {
  border-color: hsl(var(--color-success) / 0.5);
  background-color: hsl(var(--color-success) / 0.08);
}
.docs-preview .nano-alert--success .nano-alert__icon {
  color: hsl(var(--color-success));
}
.docs-preview .nano-alert--success .nano-alert__title {
  color: hsl(var(--color-success));
}

.docs-preview .nano-alert--warning {
  border-color: hsl(var(--color-warning) / 0.5);
  background-color: hsl(var(--color-warning) / 0.08);
}
.docs-preview .nano-alert--warning .nano-alert__icon {
  color: hsl(var(--color-warning));
}
.docs-preview .nano-alert--warning .nano-alert__title {
  color: hsl(var(--color-warning));
}

/* Checkbox */
.docs-preview .nano-checkbox {
  position: relative;
  display: inline-flex;
}

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

.docs-preview .nano-checkbox__label {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: var(--space-2);
  min-height: 1.125rem;
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-checkbox__label::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border: 1.5px solid hsl(var(--color-input));
  border-radius: var(--radius-sm);
  background-color: hsl(var(--color-background));
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-checkbox__label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-checkbox__input:checked + .nano-checkbox__label::before {
  background-color: hsl(var(--color-primary));
  border-color: hsl(var(--color-primary));
}

.docs-preview .nano-checkbox__input:checked + .nano-checkbox__label::after {
  opacity: 1;
}

.docs-preview .nano-checkbox__input:focus-visible + .nano-checkbox__label::before {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: 2px;
}

.docs-preview .nano-checkbox__input:disabled + .nano-checkbox__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.docs-preview .nano-checkbox--error .nano-checkbox__label::before {
  border-color: hsl(var(--color-destructive));
}

.docs-preview .nano-checkbox--error .nano-checkbox__input:checked + .nano-checkbox__label::before {
  background-color: hsl(var(--color-destructive));
  border-color: hsl(var(--color-destructive));
}

/* Radio */
.docs-preview .nano-radio-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.docs-preview .nano-radio-group__legend {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: hsl(var(--color-foreground));
  margin-bottom: var(--space-2);
}

.docs-preview .nano-radio {
  position: relative;
  display: inline-flex;
}

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

.docs-preview .nano-radio__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-radio__label::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border: 1.5px solid hsl(var(--color-input));
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-background));
  transition: border-color var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-radio__label::after {
  content: "";
  position: absolute;
  left: 0.28125rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-primary));
  transition: transform var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-radio__input:checked + .nano-radio__label::before {
  border-color: hsl(var(--color-primary));
}

.docs-preview .nano-radio__input:checked + .nano-radio__label::after {
  transform: translateY(-50%) scale(1);
}

.docs-preview .nano-radio__input:focus-visible + .nano-radio__label::before {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: 2px;
}

.docs-preview .nano-radio__input:disabled + .nano-radio__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.docs-preview .nano-radio--error .nano-radio__label::before {
  border-color: hsl(var(--color-destructive));
}

.docs-preview .nano-radio--error .nano-radio__input:checked + .nano-radio__label::after {
  background-color: hsl(var(--color-destructive));
}

/* Switch */
.docs-preview .nano-switch {
  all: revert;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0.25rem;
  border: none;
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-input));
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-switch[aria-checked="true"] {
  background-color: hsl(var(--color-primary));
}

.docs-preview .nano-switch__thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-background));
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-default);
  pointer-events: none;
}

.docs-preview .nano-switch[aria-checked="true"] .nano-switch__thumb {
  transform: translateX(1.25rem);
}

.docs-preview .nano-switch:focus-visible {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: 2px;
}

.docs-preview .nano-switch:disabled,
.docs-preview .nano-switch[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Table */
.docs-preview .nano-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--color-border));
}

.docs-preview .nano-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.docs-preview .nano-table__head {
  background-color: hsl(var(--color-muted));
}

.docs-preview .nano-table__header {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-medium);
  color: hsl(var(--color-muted-foreground));
  white-space: nowrap;
}

.docs-preview .nano-table__body .nano-table__row {
  border-top: 1px solid hsl(var(--color-border));
}

.docs-preview .nano-table__row {
  transition: background-color var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-table__cell {
  padding: var(--space-3) var(--space-4);
  color: hsl(var(--color-foreground));
  vertical-align: middle;
}

.docs-preview .nano-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: flex-end;
}

.docs-preview .nano-table--striped .nano-table__body .nano-table__row:nth-child(even) {
  background-color: hsl(var(--color-muted) / 0.5);
}

.docs-preview .nano-table--hoverable .nano-table__body .nano-table__row:hover {
  background-color: hsl(var(--color-muted));
}

/* Progress */
.docs-preview .nano-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.docs-preview .nano-progress__bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  border-radius: var(--radius-full);
  border: none;
  overflow: hidden;
  appearance: none;
  background-color: hsl(var(--color-muted));
}

.docs-preview .nano-progress__bar::-webkit-progress-bar {
  background-color: hsl(var(--color-muted));
  border-radius: var(--radius-full);
}

.docs-preview .nano-progress__bar::-webkit-progress-value {
  background-color: hsl(var(--color-primary));
  border-radius: var(--radius-full);
}

.docs-preview .nano-progress__bar::-moz-progress-bar {
  background-color: hsl(var(--color-primary));
  border-radius: var(--radius-full);
}

.docs-preview .nano-progress--success .nano-progress__bar::-webkit-progress-value {
  background-color: hsl(var(--color-success));
}
.docs-preview .nano-progress--success .nano-progress__bar::-moz-progress-bar {
  background-color: hsl(var(--color-success));
}

.docs-preview .nano-progress--warning .nano-progress__bar::-webkit-progress-value {
  background-color: hsl(var(--color-warning));
}
.docs-preview .nano-progress--warning .nano-progress__bar::-moz-progress-bar {
  background-color: hsl(var(--color-warning));
}

.docs-preview .nano-progress--destructive .nano-progress__bar::-webkit-progress-value {
  background-color: hsl(var(--color-destructive));
}
.docs-preview .nano-progress--destructive .nano-progress__bar::-moz-progress-bar {
  background-color: hsl(var(--color-destructive));
}

.docs-preview .nano-progress__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: hsl(var(--color-muted-foreground));
  text-align: right;
}

/* Tabs */
.docs-preview .nano-tabs__list {
  display: flex;
  border-bottom: 1px solid hsl(var(--color-border));
  gap: 0;
}

.docs-preview button.nano-tabs__trigger {
  all: unset;
  box-sizing: border-box;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: hsl(var(--color-muted-foreground));
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.docs-preview button.nano-tabs__trigger[aria-selected="true"] {
  color: hsl(var(--color-foreground));
  border-bottom-color: hsl(var(--color-primary));
  background: none;
}

.docs-preview button.nano-tabs__trigger:hover {
  color: hsl(var(--color-foreground));
  background: none;
}

.docs-preview button.nano-tabs__trigger:focus-visible {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: -2px;
  background: none;
}

.docs-preview .nano-tabs__panel {
  padding: var(--space-6) 0;
}

.docs-preview .nano-tabs__panel[hidden] {
  display: none;
}

/* Accordion */
.docs-preview .nano-accordion {
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-lg);
}

.docs-preview .nano-accordion__item {
  border-bottom: 1px solid hsl(var(--color-border));
}

.docs-preview .nano-accordion__item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.docs-preview .nano-accordion__item:last-child {
  border-bottom: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.docs-preview .nano-accordion__trigger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--color-foreground));
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-accordion__trigger:hover {
  background-color: hsl(var(--color-muted) / 0.5);
}

.docs-preview .nano-accordion__trigger:focus-visible {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: -2px;
}

.docs-preview .nano-accordion__trigger::-webkit-details-marker {
  display: none;
}

.docs-preview .nano-accordion__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: hsl(var(--color-muted-foreground));
  transition: transform var(--duration-normal) var(--ease-default);
}

.docs-preview .nano-accordion__item[open] .nano-accordion__icon {
  transform: rotate(180deg);
}

.docs-preview .nano-accordion__content {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--color-muted-foreground));
}

/* Dialog */
.nano-dialog {
  border: none;
  padding: 0;
  margin: auto;
  inset: 0;
  max-width: 32rem;
  width: calc(100% - var(--space-8));
  background-color: hsl(var(--color-background));
  color: hsl(var(--color-foreground));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.nano-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
}

.nano-dialog--sm {
  max-width: 24rem;
}

.nano-dialog--lg {
  max-width: 42rem;
}

.nano-dialog--full {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
}

.nano-dialog__content {
  position: relative;
  display: flex;
  flex-direction: column;
}

.nano-dialog__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-6);
  padding-bottom: 0;
  padding-right: var(--space-12);
}

.nano-dialog__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.nano-dialog__description {
  font-size: var(--text-sm);
  color: hsl(var(--color-muted-foreground));
}

.nano-dialog__body {
  padding: var(--space-6);
}

.nano-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-6);
}

button.nano-dialog__close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: hsl(var(--color-muted-foreground));
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

button.nano-dialog__close:hover {
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-muted));
}

button.nano-dialog__close:focus-visible {
  outline: 2px solid hsl(var(--color-ring));
  outline-offset: 2px;
}

/* Global toast styles (toasts render in fixed container outside .docs-preview) */
.nano-toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  max-width: 24rem;
  width: 100%;
  pointer-events: none;
}

.nano-toast-container .nano-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: hsl(var(--color-background));
  color: hsl(var(--color-foreground));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: nano-toast-slide-in var(--duration-slow) var(--ease-out);
}

.nano-toast-container .nano-toast.is-dismissing {
  animation: nano-toast-slide-out var(--duration-normal) var(--ease-in) forwards;
}

.nano-toast-container .nano-toast__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.nano-toast-container .nano-toast__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
}

.nano-toast-container .nano-toast__description {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--color-muted-foreground));
}

.nano-toast-container .nano-toast--success {
  border-color: hsl(var(--color-success) / 0.5);
  background-color: hsl(var(--color-success) / 0.05);
}

.nano-toast-container .nano-toast--success .nano-toast__title {
  color: hsl(var(--color-success));
}

.nano-toast-container .nano-toast--destructive {
  border-color: hsl(var(--color-destructive) / 0.5);
  background-color: hsl(var(--color-destructive) / 0.05);
}

.nano-toast-container .nano-toast--destructive .nano-toast__title {
  color: hsl(var(--color-destructive));
}

.nano-toast-container .nano-toast--warning {
  border-color: hsl(var(--color-warning) / 0.5);
  background-color: hsl(var(--color-warning) / 0.05);
}

.nano-toast-container .nano-toast--warning .nano-toast__title {
  color: hsl(var(--color-warning));
}

@keyframes nano-toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes nano-toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Toast close also needs override */
button.nano-toast__close {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: hsl(var(--color-muted-foreground));
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}

button.nano-toast__close:hover {
  color: hsl(var(--color-foreground));
}

/* Dropdown */
.docs-preview .nano-dropdown {
  position: relative;
  display: inline-flex;
}

.docs-preview .nano-dropdown__trigger {
  cursor: pointer;
}

.docs-preview .nano-dropdown__content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 12rem;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background-color: hsl(var(--color-popover));
  color: hsl(var(--color-popover-foreground));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.docs-preview .nano-dropdown.is-open .nano-dropdown__content {
  display: block;
}

.docs-preview button.nano-dropdown__item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.docs-preview button.nano-dropdown__item:hover {
  background-color: hsl(var(--color-muted));
}

.docs-preview .nano-dropdown__separator {
  height: 1px;
  margin: var(--space-1) calc(-1 * var(--space-1));
  background-color: hsl(var(--color-border));
}

.docs-preview .nano-dropdown__label {
  padding: var(--space-1-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: hsl(var(--color-muted-foreground));
}

/* Tooltip */
.docs-preview .nano-tooltip {
  position: relative;
  display: inline-flex;
}

.docs-preview .nano-tooltip__content {
  display: none;
  position: absolute;
  z-index: var(--z-tooltip);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: nowrap;
  color: hsl(var(--color-primary-foreground));
  background-color: hsl(var(--color-foreground));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.docs-preview .nano-tooltip__content::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background-color: hsl(var(--color-foreground));
  transform: rotate(45deg);
}

.docs-preview .nano-tooltip.is-open .nano-tooltip__content,
.docs-preview .nano-tooltip:hover .nano-tooltip__content {
  display: block;
}

.docs-preview .nano-tooltip--top .nano-tooltip__content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-2);
}

.docs-preview .nano-tooltip--top .nano-tooltip__content::after {
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.docs-preview .nano-tooltip--bottom .nano-tooltip__content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
}

.docs-preview .nano-tooltip--bottom .nano-tooltip__content::after {
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.docs-preview .nano-tooltip--left .nano-tooltip__content {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--space-2);
}

.docs-preview .nano-tooltip--left .nano-tooltip__content::after {
  right: -0.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.docs-preview .nano-tooltip--right .nano-tooltip__content {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--space-2);
}

.docs-preview .nano-tooltip--right .nano-tooltip__content::after {
  left: -0.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* Toast */
.docs-preview .nano-toast-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.docs-preview .nano-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: hsl(var(--color-background));
  color: hsl(var(--color-foreground));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.docs-preview .nano-toast__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.docs-preview .nano-toast__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
}

.docs-preview .nano-toast__description {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--color-muted-foreground));
}

.docs-preview .nano-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: hsl(var(--color-muted-foreground));
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}

.docs-preview .nano-toast__close:hover {
  color: hsl(var(--color-foreground));
}

.docs-preview .nano-toast--success {
  border-color: hsl(var(--color-success) / 0.5);
  background-color: hsl(var(--color-success) / 0.05);
}

.docs-preview .nano-toast--success .nano-toast__title {
  color: hsl(var(--color-success));
}

.docs-preview .nano-toast--destructive {
  border-color: hsl(var(--color-destructive) / 0.5);
  background-color: hsl(var(--color-destructive) / 0.05);
}

.docs-preview .nano-toast--destructive .nano-toast__title {
  color: hsl(var(--color-destructive));
}

.docs-preview .nano-toast--warning {
  border-color: hsl(var(--color-warning) / 0.5);
  background-color: hsl(var(--color-warning) / 0.05);
}

.docs-preview .nano-toast--warning .nano-toast__title {
  color: hsl(var(--color-warning));
}

/* ===== Navbar ===== */

.nano-navbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background-color: hsl(var(--color-background));
  border-bottom: 1px solid hsl(var(--color-border));
}

.nano-navbar--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.nano-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  color: hsl(var(--color-foreground));
  text-decoration: none;
  flex-shrink: 0;
}

.nano-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nano-navbar__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--color-muted-foreground));
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.nano-navbar__link:hover {
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-muted));
}

.nano-navbar__link--active {
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-muted));
}

.nano-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.nano-navbar__toggle {
  display: none;
}

/* ===== Sidebar ===== */

.nano-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 100%;
  background-color: hsl(var(--color-background));
  border-right: 1px solid hsl(var(--color-border));
  transition: width var(--duration-normal) var(--ease-default);
  overflow: hidden;
}

.nano-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid hsl(var(--color-border));
}

.nano-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  flex: 1;
  overflow-y: auto;
}

.nano-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--color-muted-foreground));
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.nano-sidebar__item:hover {
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-muted) / 0.5);
}

.nano-sidebar__item--active {
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-muted));
}

.nano-sidebar__item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.nano-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nano-sidebar__group-label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: hsl(var(--color-muted-foreground));
}

.nano-sidebar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: hsl(var(--color-muted-foreground));
  cursor: pointer;
}

.nano-sidebar__footer {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid hsl(var(--color-border));
}

/* ===== Breadcrumb ===== */

.nano-breadcrumb {
  display: flex;
  flex-wrap: wrap;
}

.nano-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nano-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.nano-breadcrumb__link {
  font-size: var(--text-sm);
  color: hsl(var(--color-muted-foreground));
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.nano-breadcrumb__link:hover {
  color: hsl(var(--color-foreground));
}

.nano-breadcrumb__link--current,
.nano-breadcrumb__link[aria-current="page"] {
  color: hsl(var(--color-foreground));
  font-weight: var(--font-medium);
  pointer-events: none;
}

.nano-breadcrumb__separator {
  font-size: var(--text-sm);
  color: hsl(var(--color-muted-foreground));
  line-height: 1;
  user-select: none;
}

.nano-breadcrumb__separator::before {
  content: "/";
}

/* ===== Avatar ===== */

.nano-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: hsl(var(--color-muted));
  position: relative;
  flex-shrink: 0;
}

.nano-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nano-avatar__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--color-muted-foreground));
}

.nano-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid hsl(var(--color-background));
  border-radius: var(--radius-full);
}

.nano-avatar__status--online { background-color: hsl(var(--color-success)); }
.nano-avatar__status--offline { background-color: hsl(var(--color-muted-foreground)); }
.nano-avatar__status--busy { background-color: hsl(var(--color-destructive)); }

.nano-avatar--sm { width: 32px; height: 32px; }
.nano-avatar--lg { width: 48px; height: 48px; }
.nano-avatar--xl { width: 64px; height: 64px; }

/* ===== Skeleton ===== */

@keyframes nano-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.nano-skeleton {
  display: block;
  background-color: hsl(var(--color-muted));
  border-radius: var(--radius-md);
  height: 1rem;
  position: relative;
  overflow: hidden;
}

.nano-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, hsl(var(--color-background) / 0.4), transparent);
  animation: nano-shimmer 1.5s var(--ease-default) infinite;
}

.nano-skeleton--text {
  height: 0.75rem;
  width: 100%;
  margin-bottom: var(--space-2);
}

.nano-skeleton--circle {
  border-radius: var(--radius-full);
  width: 40px;
  aspect-ratio: 1;
  height: auto;
}

.nano-skeleton--card {
  height: 200px;
  border-radius: var(--radius-lg);
}