@layer components {
  .date-range { position: relative; width: fit-content; font-size: 0.8125rem; }
  .date-range-trigger {
    display: flex; align-items: center; gap: 0.4rem; list-style: none;
    padding: 0.35rem 0.5rem; background: white; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); cursor: pointer; box-shadow: var(--shadow-sm);
    color: var(--color-text); font-weight: 500;
  }
  .date-range-trigger::-webkit-details-marker { display: none; }
  .date-range-trigger:hover, .date-range[open] .date-range-trigger { border-color: var(--color-gray-400); }
  .date-range-chevron { color: var(--color-text-muted); }
  .date-range[open] .date-range-chevron { transform: rotate(180deg); }
  .date-range-panel {
    position: absolute; z-index: 30; left: 0; top: calc(100% + 0.5rem);
    width: 490px; max-width: calc(100vw - 2rem); background: white;
    border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    box-shadow: 0 16px 48px rgb(15 23 42 / 14%), var(--shadow-sm);
    overflow: auto; max-height: 80vh;
  }
  .date-range-body { display: grid; grid-template-columns: 155px minmax(0, 1fr); }
  .date-range-presets { padding: 0.75rem; border-right: 1px solid var(--color-border); }
  .date-range-presets button {
    display: block; width: 100%; text-align: left; padding: 0.6rem 0.65rem;
    border: 0; background: none; border-radius: var(--radius-md); color: var(--color-text-muted);
    font: inherit; cursor: pointer;
  }
  .date-range-presets button:hover { background: var(--color-gray-50); color: var(--color-text); }
  .date-range-presets button[aria-pressed="true"] { background: var(--color-gray-100); color: var(--color-text); font-weight: 600; }
  .date-range-custom { padding: 1rem; min-width: 0; }
  .date-range-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .date-range-inputs label { display: block; font-size: 0.6875rem; font-weight: 500; margin-bottom: 0.35rem; }
  .date-range-inputs input { width: 100%; min-width: 0; padding: 0.5rem; font-family: inherit; font-size: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: white; }
  .date-range-month { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 0.5rem; }
  .date-range-month button { width: 32px; height: 32px; font-size: 1.3rem; }
  .date-range-month button, .date-range-days button { border: 0; border-radius: var(--radius-md); background: none; cursor: pointer; color: var(--color-text); }
  .date-range-weekdays, .date-range-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
  .date-range-weekdays { color: var(--color-text-muted); font-size: 0.625rem; padding-bottom: 0.35rem; }
  .date-range-days { row-gap: 3px; }
  .date-range-days button { height: 34px; font-size: 0.75rem; position: relative; }
  .date-range-days button.in-range { background: var(--color-gray-100); border-radius: 0; }
  .date-range-days button:hover, .date-range-month button:hover { background: var(--color-gray-200); }
  .date-range-days button[aria-pressed="true"] { background: var(--color-primary); color: white; }
  .date-range-days button[aria-current="date"]::after { content: ""; position: absolute; bottom: 4px; left: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
  .date-range button:disabled { opacity: 0.3; cursor: default; background: none; }
  .date-range :focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
  .date-range-hint { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.6875rem; line-height: 1.5; }
  .date-range-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); }
  @media (max-width: 640px) {
    .date-range-panel { position: fixed; top: 1rem; left: 1rem; right: 1rem; width: auto; max-height: calc(100dvh - 2rem); }
    .date-range-body { grid-template-columns: minmax(0, 1fr); }
    .date-range-presets { display: flex; flex-wrap: wrap; gap: 0.25rem; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .date-range-presets button { width: auto; font-size: 0.75rem; padding: 0.5rem; }
    .date-range-days button { height: 40px; }
  }
}