Spaces:
Running
Running
| .backdrop { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 2000; | |
| background: rgba(0, 0, 0, 0.55); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px; | |
| } | |
| .panel { | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow: auto; | |
| border-radius: var(--radius-lg, 12px); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--bg); | |
| padding: 20px 22px 22px; | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); | |
| } | |
| .panelDefault { | |
| max-width: 520px; | |
| } | |
| .panelWide { | |
| max-width: 640px; | |
| } | |
| .steps { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 4px; | |
| margin: 0 0 18px; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .step { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 11px; | |
| font-weight: 650; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| font-family: var(--font-mono); | |
| color: var(--muted); | |
| } | |
| .step + .step::before { | |
| content: ""; | |
| width: 12px; | |
| height: 1px; | |
| margin-right: 4px; | |
| background: var(--border-subtle); | |
| } | |
| .stepCurrent { | |
| color: var(--text-display, var(--text)); | |
| } | |
| .stepDone { | |
| color: var(--muted); | |
| } | |
| .dropzone { | |
| display: block; | |
| border: 1px dashed var(--border-subtle); | |
| background: var(--surface-card); | |
| border-radius: var(--radius-lg, 12px); | |
| padding: 18px 16px; | |
| cursor: pointer; | |
| transition: | |
| border-color var(--motion-xs, 0.12s) ease, | |
| background var(--motion-xs, 0.12s) ease; | |
| } | |
| .dropzoneDragging { | |
| border-width: 2px; | |
| border-color: var(--accent); | |
| background: var(--surface-muted); | |
| } | |
| .fileInput { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| .dropzoneHint { | |
| margin: 0; | |
| font-size: 14px; | |
| font-weight: 550; | |
| color: var(--text); | |
| } | |
| .dropzoneSub { | |
| margin: 6px 0 0; | |
| font-size: 12px; | |
| color: var(--muted); | |
| line-height: 1.4; | |
| } | |
| .fileRow { | |
| margin-top: 12px; | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| font-size: 13px; | |
| color: var(--text); | |
| } | |
| .actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| margin-top: 4px; | |
| } | |
| .primaryCta { | |
| min-height: 44px; | |
| padding: 0 18px; | |
| } | |
| .ghostBtn { | |
| min-height: 44px; | |
| padding: 0 14px; | |
| font-size: 14px; | |
| } | |
| .textarea { | |
| width: 100%; | |
| padding: 12px 14px; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| border-radius: var(--radius-lg, 12px); | |
| } | |
| .options { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .optionCard { | |
| flex: 1 1 200px; | |
| text-align: left; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-lg, 12px); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| cursor: pointer; | |
| font: inherit; | |
| color: inherit; | |
| } | |
| .optionCardSelected { | |
| border: 2px solid var(--accent); | |
| background: var(--surface-muted); | |
| padding: 13px 15px; | |
| } | |
| .optionHead { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 6px; | |
| } | |
| .optionLabel { | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .recommended { | |
| font-size: 11px; | |
| font-weight: 650; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| background: var(--color-primary-light, var(--surface-muted)); | |
| color: var(--accent); | |
| } | |
| .optionDesc { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| .stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| align-items: stretch; | |
| } | |
| .laterBtn { | |
| font-size: 13px; | |
| min-height: 36px; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--muted); | |
| } | |
| .laterBtn:hover:not(:disabled) { | |
| color: var(--text); | |
| } | |
| .rebuild { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| margin: 0 0 16px; | |
| font-size: 13px; | |
| color: var(--text); | |
| line-height: 1.4; | |
| } | |