:root {
    --public-content-width: 720px;
    --public-border: var(--border-hairline);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg-app);
    color: var(--text-body);
    font-family: var(--font-body);
}

button, input, select, textarea { font: inherit; }

.public-contribution-shell {
    width: min(100%, var(--public-content-width));
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-8);
}

.public-contribution-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--hit-min);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.public-contribution-back .material-symbols-outlined { font-size: var(--text-lg); }

.public-contribution-card {
    margin-top: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--public-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.public-contribution-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.public-contribution-logo { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.public-contribution-eyebrow { margin: 0 0 var(--space-1); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); }
h1 { margin: 0; color: var(--text-strong); font-size: var(--text-2xl); line-height: 1.2; }
.public-contribution-intro { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; }

fieldset { margin: 0 0 var(--space-5); padding: 0; border: 0; }
legend { margin-bottom: var(--space-3); color: var(--text-strong); font-size: var(--text-md); font-weight: var(--weight-bold); }
legend span { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }

.public-contribution-field { margin-top: var(--space-4); }
.public-contribution-field label, .public-contribution-label, .public-contribution-captcha > p:first-child { display: block; margin-bottom: var(--space-2); color: var(--text-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
label span, .public-contribution-captcha span { color: var(--color-primary); }
input, select, textarea { width: 100%; min-height: var(--control-h); padding: var(--space-3); color: var(--text-body); background: var(--surface-muted); border: 1px solid var(--public-border); border-radius: var(--radius-md); outline: 0; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: var(--ring-focus); }
input[type="file"] { padding: var(--space-2); background: var(--surface-card); }
input:disabled, select:disabled { cursor: not-allowed; opacity: .7; }
.public-contribution-services { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.public-contribution-service { display: flex !important; align-items: center; gap: var(--space-3); min-height: var(--hit-min); margin: 0 !important; padding: var(--space-3); border: 1px solid var(--public-border); border-radius: var(--radius-md); background: var(--surface-muted); font-weight: var(--weight-regular) !important; }
.public-contribution-service input { width: var(--space-4); min-height: var(--space-4); margin: 0; accent-color: var(--color-primary); }
#services-extra { display: grid; gap: var(--space-2); }
#services-extra[hidden] { display: none; }
.public-contribution-services-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--hit-min); padding: var(--space-2) var(--space-3); color: var(--color-primary); background: transparent; border: 1px dashed var(--public-border); border-radius: var(--radius-md); font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; }

.public-contribution-help { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.public-contribution-captcha { margin: var(--space-5) 0; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.public-contribution-captcha > p { margin-top: 0; }
#public-turnstile-widget { min-height: 65px; }
.public-contribution-status { min-height: var(--control-h); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5; }
.public-contribution-status:empty { display: none; }
.public-contribution-status[data-tone="error"] { color: var(--text-body); background: var(--surface-sunken); }
.public-contribution-status[data-tone="success"] { color: var(--color-nearby); background: var(--surface-sunken); }
.public-contribution-submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: var(--hit-min); padding: var(--space-3) var(--space-4); color: var(--text-on-brand); background: var(--color-primary); border: 0; border-radius: var(--radius-pill); box-shadow: var(--shadow-fab); cursor: pointer; font-weight: var(--weight-bold); }
.public-contribution-submit:hover:not(:disabled) { background: var(--color-primary-hover); }
.public-contribution-submit:disabled { cursor: not-allowed; opacity: .55; }
.public-contribution-submit .material-symbols-outlined { font-size: var(--text-lg); }

@media (min-width: 640px) {
    .public-contribution-shell { padding: var(--space-6) var(--space-4) var(--space-8); }
    .public-contribution-card { padding: var(--space-7); }
}