:root {
    --c-text: #1c2024;
    --c-muted: #6b7280;
    --c-bg: #fafafa;
    --c-card-bg: #ffffff;
    --c-border: #e5e7eb;
    --c-primary: #2563eb;
    --c-primary-hover: #1d4ed8;
    --c-secondary: #f3f4f6;
    --c-error-bg: #fef2f2;
    --c-error-border: #fecaca;
    --c-error-text: #991b1b;
    --c-info-bg: #eff6ff;
    --c-info-border: #bfdbfe;
    --c-info-text: #1e40af;
    --radius: 8px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.5;
    font-size: 16px;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.page-header .step { color: var(--c-muted); margin: 0 0 .5rem; font-size: .9rem; }

.progress-bar {
    background: var(--c-secondary);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}
.progress-bar-fill {
    background: var(--c-primary);
    height: 100%;
    transition: width .25s ease;
}

.muted { color: var(--c-muted); }
.req { color: #b91c1c; margin-left: .15rem; }

.alert {
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid;
}
.alert-error { background: var(--c-error-bg); border-color: var(--c-error-border); color: var(--c-error-text); }
.alert-info  { background: var(--c-info-bg);  border-color: var(--c-info-border);  color: var(--c-info-text);  }

fieldset.q {
    background: var(--c-card-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.1rem;
    margin: 0 0 1rem;
}
fieldset.q legend {
    font-weight: 600;
    padding: 0 .25rem;
}
fieldset.q .help {
    color: var(--c-muted);
    font-size: .9rem;
    margin: 0 0 .6rem;
}
fieldset.q-error {
    border-color: var(--c-error-border);
    background: var(--c-error-bg);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: .55rem .75rem;
    font: inherit;
    color: inherit;
    background: #fff;
}
textarea { resize: vertical; min-height: 100px; }

input[type="file"] { font: inherit; }

label.opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    cursor: pointer;
}
label.opt input { margin: 0; }
label.opt-other { gap: .75rem; }
label.opt-other input[type="text"] { flex: 1; }

.field-error { color: var(--c-error-text); margin: .5rem 0 0; font-size: .9rem; }
.current-file { color: var(--c-muted); margin: 0 0 .5rem; font-size: .9rem; }

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.form-actions > :first-child:last-child { margin-left: auto; }

.btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: .6rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-secondary { background: var(--c-secondary); color: var(--c-text); border-color: var(--c-border); }
.btn-secondary:hover { background: #e5e7eb; }

.form-narrow { max-width: 420px; }

/* Admin */
.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-actions { display: flex; gap: .5rem; align-items: center; }
.admin-actions form.inline { margin: 0; }

.tokens-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-card-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .94rem;
}
.tokens-table th, .tokens-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: top;
}
.tokens-table th { background: var(--c-secondary); font-weight: 600; }
.tokens-table tbody tr:last-child td { border-bottom: none; }
.tokens-table td.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.link-like {
    background: none;
    border: none;
    color: var(--c-primary);
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.link-like.danger { color: var(--c-error-text); }
.link-like:hover { text-decoration: underline; }

.created-url {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.created-url code {
    background: #fff;
    padding: .35rem .55rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    word-break: break-all;
}

.response-section {
    background: var(--c-card-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.response-section h2 { margin-top: 0; font-size: 1.1rem; }
.response-q { padding: .55rem 0; border-top: 1px solid var(--c-border); }
.response-q:first-of-type { border-top: none; }
.response-label { font-weight: 600; }
.response-value { margin-top: .25rem; }
.answer-list { margin: .25rem 0; padding-left: 1.25rem; }