:root {
    --design-page: var(--page-background);
    --design-surface: var(--surface);
    --design-text: var(--text);
    --design-muted: var(--text-muted);
    --design-primary: var(--accent);
    --design-active: var(--accent-strong);
    --design-error: var(--danger);
    --design-success: var(--success);
    --design-border: var(--border-strong);
    --design-button: var(--button-background);
    --design-button-hover: var(--button-hover);
    --design-button-disabled: var(--button-disabled);
    --design-button-disabled-text: var(--button-disabled-text);
    --design-radius: 1rem;
    --design-space-sm: .5rem;
    --design-space-md: 1rem;
    --design-space-lg: 2rem;
    --design-shadow-sm: 0 .25rem .8rem #0003;
    --design-shadow-md: 0 1rem 3rem #0004;
    --design-shadow-lg: 0 2rem 5rem #0005;
    --design-content: 900px;
    --design-font: Inter, ui-sans-serif, system-ui, sans-serif;
    --design-font-sm: .875rem;
    --design-font-md: 1rem;
    --design-font-lg: clamp(2rem, 6vw, 4rem);
}

.design-page { background: var(--design-page); color: var(--design-text); font-family: var(--design-font); }
.design-card { background: var(--design-surface); border: 1px solid var(--design-border); border-radius: var(--design-radius); box-shadow: var(--design-shadow-md); }
.design-page > main form { display: grid; gap: var(--design-space-md); }
.design-page > main input, .design-page > main select, .design-page > main button { font: inherit; }
.design-page > main input, .design-page > main select { padding: .7rem; border: 1px solid var(--design-border); border-radius: .55rem; background: var(--surface); color: var(--design-text); }
.design-page > main button { padding: .7rem 1rem; border: 1px solid var(--design-primary); border-radius: .6rem; background: var(--design-button); color: var(--button-text); }
.design-page > main button:hover, .design-page > main button:focus-visible { background: var(--design-button-hover); }
.design-page > main button:disabled, .design-page > main button:disabled:hover { cursor: default; opacity: 1; border-color: var(--design-border); background: var(--design-button-disabled); color: var(--design-button-disabled-text); }
.design-page > main a { color: var(--link); }
.design-page > main .error, .design-status--error { color: var(--design-error); }
.design-status--success { color: var(--design-success); }

.design-dropzone { display: grid; min-height: 15rem; place-items: center; gap: var(--design-space-sm); padding: var(--design-space-lg); border: 2px dashed var(--design-border); border-radius: var(--design-radius); background: var(--surface-muted); color: var(--text); text-align: center; }
.design-dropzone.is-dragging, .design-dropzone:focus-within { border-color: var(--design-active); box-shadow: 0 0 0 .2rem #67a4ef33; }
.design-dropzone input { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.design-file-picker { cursor: pointer; color: var(--link); text-decoration: underline; }
.design-file-details { color: var(--design-muted); }
.design-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.design-check input { width: auto !important; margin-top: .2rem; }
.design-check span { font-size: var(--design-font-sm); font-weight: 400; line-height: 1.55; }