* {

box-sizing: border-box;

}

body {

margin: 0;

}

.page {

min-height: 100vh;

background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);

font-family:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

color: #0f172a;

padding: 40px 20px;

}

.shell {

max-width: 640px;

margin: 0 auto;

}

.header {

margin-bottom: 32px;

text-align: center;

}

.title {

font-size: 36px;

margin: 0;

font-weight: 700;

letter-spacing: -0.02em;

background: linear-gradient(135deg, #6366f1, #8b5cf6);

-webkit-background-clip: text;

background-clip: text;

-webkit-text-fill-color: transparent;

}

.subtitle {

color: #64748b;

margin-top: 8px;

font-size: 15px;

}

.stepper {

display: flex;

justify-content: space-between;

margin-bottom: 24px;

gap: 8px;

}

.stepper-item {

display: flex;

flex-direction: column;

align-items: center;

gap: 6px;

flex: 1;

}

.stepper-dot {

width: 32px;

height: 32px;

border-radius: 50%;

background: #e2e8f0;

color: #64748b;

display: flex;

align-items: center;

justify-content: center;

font-size: 13px;

font-weight: 600;

transition: all 0.2s;

}

.stepper-dot.active {

background: #6366f1;

color: #fff;

box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);

}

.stepper-dot.done {

background: #10b981;

color: #fff;

}

.stepper-label {

font-size: 11px;

color: #94a3b8;

}

.stepper-label.active {

color: #0f172a;

font-weight: 600;

}

.card {

background: #fff;

border-radius: 16px;

box-shadow:

0 1px 3px rgba(0, 0, 0, 0.05),

0 10px 40px rgba(0, 0, 0, 0.08);

overflow: hidden;

}

.card-header {

padding: 20px 24px;

border-bottom: 1px solid #f1f5f9;

display: flex;

justify-content: space-between;

align-items: center;

}

.card-title {

margin: 0;

font-size: 18px;

font-weight: 600;

}

.card-body {

padding: 24px;

min-height: 180px;

}

.card-footer {

padding: 16px 24px;

border-top: 1px solid #f1f5f9;

display: flex;

gap: 8px;

background: #fafafa;

align-items: center;

}

.field {

margin-bottom: 16px;

}

.field-label {

display: block;

font-size: 13px;

font-weight: 500;

color: #475569;

margin-bottom: 6px;

}

.field-hint {

font-size: 12px;

color: #94a3b8;

margin-top: 4px;

margin-bottom: 0;

}

.input {

width: 100%;

padding: 10px 12px;

font-size: 14px;

border: 1px solid #e2e8f0;

border-radius: 8px;

outline: none;

font-family: inherit;

transition:

border-color 0.15s,

box-shadow 0.15s;

}

.input:focus {

border-color: #6366f1;

box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

}

.textarea {

min-height: 96px;

resize: vertical;

}

.checkbox-row {

display: flex;

align-items: center;

gap: 8px;

font-size: 14px;

cursor: pointer;

}

.radio-group {

display: flex;

gap: 8px;

}

.radio-option {

flex: 1;

padding: 10px 16px;

border: 1px solid #e2e8f0;

border-radius: 8px;

text-align: center;

cursor: pointer;

font-size: 14px;

transition: all 0.15s;

}

.radio-option:hover {

border-color: #cbd5e1;

}

.radio-option.active {

border-color: #6366f1;

background: #eef2ff;

color: #4338ca;

font-weight: 500;

}

.placeholder {

text-align: center;

padding: 32px;

color: #94a3b8;

background: #f8fafc;

border-radius: 8px;

}

.preview {

background: #0f172a;

color: #e2e8f0;

padding: 16px;

border-radius: 8px;

font-size: 12px;

overflow: auto;

margin: 0;

font-family: "SF Mono", Menlo, monospace;

}

.button {

padding: 8px 16px;

font-size: 14px;

font-weight: 500;

border: none;

border-radius: 8px;

cursor: pointer;

transition: all 0.15s;

font-family: inherit;

}

.button:disabled {

opacity: 0.4;

cursor: not-allowed;

}

.button-primary {

background: #6366f1;

color: #fff;

}

.button-primary:hover:not(:disabled) {

background: #4f46e5;

}

.button-ghost {

background: transparent;

color: #475569;

border: 1px solid #e2e8f0;

}

.button-ghost:hover:not(:disabled) {

border-color: #cbd5e1;

background: #f8fafc;

}

.button-destructive {

padding: 8px 16px;

font-size: 14px;

font-weight: 500;

border: none;

border-radius: 8px;

cursor: pointer;

background: transparent;

color: #ef4444;

font-family: inherit;

transition: all 0.15s;

}

.button-destructive:hover {

background: #fef2f2;

}

.pill {

font-size: 11px;

padding: 4px 10px;

border-radius: 999px;

font-weight: 500;

}

.pill-idle {

background: #f1f5f9;

color: #64748b;

}

.pill-saving {

background: #fef3c7;

color: #92400e;

}

.pill-saved {

background: #dcfce7;

color: #166534;

}

.pill-error {

background: #fee2e2;

color: #991b1b;

}

.footer {

margin-top: 32px;

text-align: center;

font-size: 13px;

color: #94a3b8;

}

.link {

color: #6366f1;

text-decoration: none;

}

.link:hover {

text-decoration: underline;

}