/* Opmaak van Mijn 2WCF Cloud. De rest komt uit tokens.css en app.css van de beheerportal. */
body { background: var(--gray-50); }
.ss-top { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-5); background: #fff; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 10; }
.ss-top img { height: 28px; }
.ss-brand { font-weight: 700; font-size: 16px; color: var(--gray-900); white-space: nowrap; }
.ss-brand small { display: block; font-weight: 500; font-size: 12px; color: var(--gray-500); }
.ss-spacer { flex: 1; }
.ss-user { color: var(--gray-700); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ss-wrap { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-4) 48px; }
.ss-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ss-form { display: grid; gap: var(--space-3); max-width: 420px; }
.ss-err { color: var(--color-danger); font-size: 14px; min-height: 20px; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rules li { display: flex; align-items: center; gap: var(--space-2); color: var(--gray-500); font-size: 13px; }
.rules li .icon { width: 14px; height: 14px; stroke-width: 3; color: var(--gray-300); }
.rules li.ok { color: var(--gray-900); }
.rules li.ok .icon { color: var(--2wcf-green-strong); }
.ss-center { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--gray-500); }
@media (max-width: 640px) { .ss-top { padding: 10px var(--space-3); } .ss-user { display: none; } }