body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
  text-shadow: none;
}

@layer ren3-ds.tokens {
  :root {
    color-scheme: light;
    --ren3-font-sans: "HarmonyOS Sans", "Segoe UI", sans-serif;
    --ren3-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    --ren3-space-1: 0.25rem;
    --ren3-space-2: 0.5rem;
    --ren3-space-3: 0.75rem;
    --ren3-space-4: 1rem;
    --ren3-space-5: 1.25rem;
    --ren3-space-6: 1.5rem;
    --ren3-space-8: 2rem;
    --ren3-space-10: 2.5rem;
    --ren3-space-12: 3rem;

    --ren3-radius-sm: 0.375rem;
    --ren3-radius-md: 0.625rem;
    --ren3-radius-lg: 0.875rem;
    --ren3-radius-xl: 1.25rem;
    --ren3-radius-pill: 999px;

    --ren3-duration-fast: 120ms;
    --ren3-duration-normal: 180ms;
    --ren3-ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --ren3-gradient-brand: linear-gradient(135deg, #e9579f 0%, #9b5de5 100%);
    --ren3-focus-ring: 0 0 0 3px rgba(155, 93, 229, 0.32);
    --ren3-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
    --ren3-shadow-menu: 0 12px 36px rgba(15, 23, 42, 0.16);

    --ren3-canvas: #f6f7fb;
    --ren3-surface: #ffffff;
    --ren3-surface-raised: #ffffff;
    --ren3-surface-subtle: #f0f2f7;
    --ren3-surface-inverse: #101827;
    --ren3-text: #152033;
    --ren3-text-muted: #64748b;
    --ren3-text-inverse: #f8fafc;
    --ren3-border: #dce2ec;
    --ren3-border-strong: #bcc7d8;
    --ren3-action-primary: #8d5ae8;
    --ren3-action-primary-hover: #7942d9;
    --ren3-action-secondary: #eef0f7;
    --ren3-action-secondary-hover: #e3e6f0;
    --ren3-success: #168b58;
    --ren3-warning: #b96c05;
    --ren3-danger: #c63d57;
    --ren3-info: #2778c7;
  }

  :root[data-ren3-theme="dark"] {
    color-scheme: dark;
    --ren3-canvas: #0b1020;
    --ren3-surface: #111827;
    --ren3-surface-raised: #182235;
    --ren3-surface-subtle: #1f2b3d;
    --ren3-surface-inverse: #f8fafc;
    --ren3-text: #e8edf7;
    --ren3-text-muted: #9aa9bf;
    --ren3-text-inverse: #101827;
    --ren3-border: #2e3b50;
    --ren3-border-strong: #465774;
    --ren3-action-secondary: #243146;
    --ren3-action-secondary-hover: #2c3b52;
    --ren3-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.25);
    --ren3-shadow-menu: 0 16px 40px rgba(0, 0, 0, 0.4);
  }

  :root[data-ren3-density="comfortable"] {
    --ren3-control-height: 2.75rem;
    --ren3-control-padding-x: 1rem;
  }

  :root,
  :root[data-ren3-density="compact"] {
    --ren3-control-height: 2.25rem;
    --ren3-control-padding-x: 0.75rem;
  }

  :root[data-ren3-text-scale="sm"] { font-size: 14px; }
  :root[data-ren3-text-scale="md"] { font-size: 16px; }
  :root[data-ren3-text-scale="lg"] { font-size: 18px; }

  :root[data-ren3-neutral="stone"] {
    --ren3-canvas: #f8f7f5;
    --ren3-surface-subtle: #f0eeea;
  }

  :root[data-ren3-neutral="slate"] {
    --ren3-canvas: #f5f7fb;
    --ren3-surface-subtle: #edf1f8;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --ren3-duration-fast: 1ms; --ren3-duration-normal: 1ms; }
  }
}

@layer ren3-ds.base {
  .ren3-ds {
    min-height: 100%;
    color: var(--ren3-text);
    font-family: var(--ren3-font-sans);
    background: var(--ren3-canvas);
  }

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

  .ren3-ds button,
  .ren3-ds input,
  .ren3-ds select,
  .ren3-ds textarea {
    font: inherit;
  }

  .ren3-ds :focus-visible {
    outline: none;
    box-shadow: var(--ren3-focus-ring);
  }

  .ren3-ds-button {
    min-height: var(--ren3-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ren3-space-2);
    border: 1px solid transparent;
    border-radius: var(--ren3-radius-md);
    padding: 0 var(--ren3-control-padding-x);
    cursor: pointer;
    font-weight: 650;
    transition: background-color var(--ren3-duration-fast) var(--ren3-ease-standard),
      border-color var(--ren3-duration-fast) var(--ren3-ease-standard),
      transform var(--ren3-duration-fast) var(--ren3-ease-standard);
  }

  .ren3-ds-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .ren3-ds-button-primary {
    color: #fff;
    background: var(--ren3-gradient-brand);
  }

  .ren3-ds-button-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(0.98);
  }

  .ren3-ds-button-secondary {
    color: var(--ren3-text);
    border-color: var(--ren3-border);
    background: var(--ren3-action-secondary);
  }

  .ren3-ds-button-secondary:hover:not(:disabled) {
    background: var(--ren3-action-secondary-hover);
  }

  .ren3-ds-card {
    border: 1px solid var(--ren3-border);
    border-radius: var(--ren3-radius-xl);
    background: var(--ren3-surface-raised);
    box-shadow: var(--ren3-shadow-card);
  }

  .ren3-ds-eyebrow {
    margin: 0;
    color: var(--ren3-action-primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ren3-ds-muted {
    color: var(--ren3-text-muted);
  }

  @media (max-width: 42rem) {
    .ren3-ds-button { min-height: 2.75rem; }
  }
}

@layer ren3-ds.application-shell {
  .ren3-application-shell {
    display: grid;
    grid-template-columns: 3.75rem minmax(15rem, 20rem) minmax(0, 1fr);
    min-height: 100dvh;
    overflow: hidden;
    background: var(--ren3-canvas);
  }

  .ren3-application-shell__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ren3-space-3);
    padding: var(--ren3-space-3) var(--ren3-space-2);
    color: var(--ren3-text-inverse);
    background: var(--ren3-surface-inverse);
  }

  .ren3-application-shell__brand {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--ren3-radius-md);
    background: var(--ren3-gradient-brand);
    color: #fff;
    font-weight: 800;
  }

  .ren3-application-shell__nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--ren3-space-1);
  }

  .ren3-application-shell__nav-item,
  .ren3-application-shell__icon-button,
  .ren3-application-shell__drawer-nav button {
    border: 0;
    cursor: pointer;
    font: inherit;
  }

  .ren3-application-shell__nav-item {
    position: relative;
    width: 2.5rem;
    min-height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--ren3-radius-md);
    color: #a9b5c8;
    background: transparent;
  }

  .ren3-application-shell__nav-item:hover,
  .ren3-application-shell__nav-item--active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .ren3-application-shell__nav-item--active::before {
    position: absolute;
    left: -0.5rem;
    width: 0.1875rem;
    height: 1.5rem;
    border-radius: var(--ren3-radius-pill);
    background: var(--ren3-gradient-brand);
    content: "";
  }

  .ren3-application-shell__nav-label { display: none; }

  .ren3-application-shell__badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1rem;
    height: 1rem;
    display: grid;
    place-items: center;
    border-radius: var(--ren3-radius-pill);
    color: #fff;
    background: #d73d78;
    font-size: 0.625rem;
    font-weight: 800;
  }

  .ren3-application-shell__sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ren3-border);
    background: var(--ren3-surface);
    transition: width var(--ren3-duration-normal) var(--ren3-ease-standard), opacity var(--ren3-duration-normal) var(--ren3-ease-standard);
  }

  .ren3-application-shell--collapsed { grid-template-columns: 3.75rem 0 minmax(0, 1fr); }
  .ren3-application-shell--collapsed .ren3-application-shell__sidebar { overflow: hidden; opacity: 0; pointer-events: none; }

  .ren3-application-shell__sidebar-header,
  .ren3-application-shell__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ren3-space-3);
    padding: var(--ren3-space-4);
    border-bottom: 1px solid var(--ren3-border);
  }

  .ren3-application-shell__sidebar-header h1,
  .ren3-application-shell__sidebar-header p { margin: 0; }
  .ren3-application-shell__sidebar-header h1 { font-size: 1rem; }

  .ren3-application-shell__icon-button {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--ren3-radius-md);
    color: var(--ren3-text);
    background: var(--ren3-action-secondary);
  }

  .ren3-application-shell__icon-button:hover { background: var(--ren3-action-secondary-hover); }

  .ren3-application-shell__legacy-content {
    min-width: 0;
    min-height: 0;
  }

  .ren3-application-shell__sidebar > .ren3-application-shell__legacy-content {
    flex: 1 1;
    overflow: auto;
    padding: var(--ren3-space-3);
  }

  .ren3-application-shell__sidebar-footer,
  .ren3-application-shell__drawer-footer {
    display: flex;
    align-items: center;
    gap: var(--ren3-space-2);
    padding: var(--ren3-space-3);
    border-top: 1px solid var(--ren3-border);
  }

  .ren3-application-shell__main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ren3-application-shell__main-content {
    min-width: 0;
    min-height: 0;
    flex: 1 1;
    overflow: hidden;
  }

  .ren3-application-shell__mobile-header { display: none; }
  .ren3-application-shell__drawer-backdrop { display: none; }

  @media (max-width: 52rem) {
    .ren3-application-shell { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .ren3-application-shell__sidebar { display: none; }
    .ren3-application-shell--collapsed { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .ren3-application-shell__mobile-header { display: flex; }
    .ren3-application-shell__drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100000004;
      z-index: var(--rn3-z-popupmodal, 100000004);
      display: flex;
      background: rgba(5, 10, 20, 0.48);
    }
    .ren3-application-shell__drawer {
      width: min(23rem, calc(100vw - 2.5rem));
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--ren3-surface);
      box-shadow: var(--ren3-shadow-menu);
    }
    .ren3-application-shell__drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--ren3-space-4); border-bottom: 1px solid var(--ren3-border); }
    .ren3-application-shell__drawer-header h2 { margin: 0; font-size: 1rem; }
    .ren3-application-shell__drawer-body { min-height: 0; flex: 1 1; overflow: auto; }
    .ren3-application-shell__drawer-nav { display: grid; grid-gap: var(--ren3-space-1); gap: var(--ren3-space-1); padding: var(--ren3-space-3); border-bottom: 1px solid var(--ren3-border); }
    .ren3-application-shell__drawer-nav button { min-height: 2.75rem; display: flex; align-items: center; gap: var(--ren3-space-3); border-radius: var(--ren3-radius-md); padding: 0 var(--ren3-space-3); color: var(--ren3-text); background: transparent; text-align: left; }
    .ren3-application-shell__drawer-nav button[aria-current="page"] { color: #fff; background: var(--ren3-gradient-brand); }
    .ren3-application-shell__drawer .ren3-application-shell__legacy-content { padding: var(--ren3-space-3); }
  }
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}