| .modal { |
| position: fixed; |
| inset: 0; |
| z-index: 50; |
| display: grid; |
| place-items: center; |
| padding: var(--sp-6); |
| } |
|
|
| .modal__backdrop { |
| position: absolute; |
| inset: 0; |
| background: rgba(8, 10, 14, 0.78); |
| backdrop-filter: blur(2px); |
| } |
|
|
| .modal__panel { |
| position: relative; |
| width: min(720px, 100%); |
| background: var(--surface); |
| border: 1px solid var(--border-strong); |
| box-shadow: var(--shadow-modal); |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .modal__header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| padding: var(--sp-6) var(--sp-6) var(--sp-4); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .modal__title { |
| font-family: var(--font-display); |
| font-size: var(--fs-2xl); |
| margin-top: 6px; |
| letter-spacing: -0.01em; |
| } |
|
|
| .modal__close { |
| border-color: var(--border); |
| padding: 6px; |
| display: grid; |
| place-items: center; |
| } |
|
|
| .modal__body { |
| padding: var(--sp-6); |
| display: flex; |
| flex-direction: column; |
| gap: var(--sp-5); |
| } |
|
|
| .field { |
| display: flex; |
| flex-direction: column; |
| gap: var(--sp-2); |
| min-width: 0; |
| } |
|
|
| .field input, |
| .field select { |
| width: 100%; |
| } |
|
|
| .field__hint { |
| font-size: var(--fs-xs); |
| color: var(--text-faint); |
| letter-spacing: 0.03em; |
| } |
|
|
| .field-row { |
| display: grid; |
| grid-template-columns: 1fr 1.4fr; |
| gap: var(--sp-4); |
| } |
|
|
| .suggestions__chips { |
| display: flex; |
| flex-wrap: wrap; |
| gap: var(--sp-2); |
| margin-top: var(--sp-2); |
| } |
|
|
| .chip { |
| font-size: var(--fs-xs); |
| letter-spacing: 0.06em; |
| text-transform: none; |
| padding: 6px 10px; |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--text-muted); |
| border-radius: 0; |
| } |
|
|
| .chip:hover { |
| border-color: var(--accent); |
| color: var(--accent); |
| } |
|
|
| .modal__footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: var(--sp-5); |
| padding: var(--sp-4) var(--sp-6) var(--sp-6); |
| border-top: 1px solid var(--border); |
| } |
|
|
| .modal__hint { |
| font-size: var(--fs-xs); |
| color: var(--text-muted); |
| letter-spacing: 0.04em; |
| max-width: 380px; |
| line-height: var(--lh-snug); |
| } |
|
|
| .modal__actions { |
| display: flex; |
| gap: var(--sp-3); |
| } |
|
|
| |
|
|
| .empty-state { |
| position: absolute; |
| inset: 0; |
| display: grid; |
| place-items: center; |
| padding: var(--sp-10); |
| } |
|
|
| .empty-state__inner { |
| max-width: 600px; |
| text-align: left; |
| } |
|
|
| .empty-state__title { |
| font-family: var(--font-display); |
| font-size: var(--fs-4xl); |
| line-height: 1; |
| margin: var(--sp-4) 0 var(--sp-5); |
| letter-spacing: -0.015em; |
| } |
|
|
| .empty-state__title em { |
| color: var(--accent); |
| font-style: italic; |
| } |
|
|
| .empty-state__lede { |
| color: var(--text-muted); |
| font-size: var(--fs-md); |
| line-height: var(--lh-base); |
| margin-bottom: var(--sp-6); |
| max-width: 520px; |
| } |
|
|
| @media (max-width: 900px) { |
| .modal { |
| padding: var(--sp-4); |
| } |
|
|
| .modal__panel { |
| max-height: calc(100dvh - (2 * var(--sp-4))); |
| overflow: auto; |
| } |
|
|
| .field-row { |
| grid-template-columns: 1fr; |
| } |
|
|
| .modal__footer { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .modal__actions { |
| width: 100%; |
| justify-content: flex-end; |
| } |
|
|
| .empty-state { |
| padding: var(--sp-6) var(--sp-4); |
| } |
|
|
| .empty-state__title { |
| font-size: clamp(32px, 9vw, var(--fs-4xl)); |
| } |
| } |
|
|
