.forms-layout { grid-template-columns: minmax(0,1.25fr) minmax(280px,.85fr); }
.demo-panel { overflow: hidden; }
.demo-panel .panel-head { gap: 16px; flex-wrap: wrap; }
.form-themes { display: inline-flex; gap: 3px; padding: 3px; background: #f0f2f5; border: 1px solid #e2e5e9; border-radius: 7px; }
.form-themes button { border: 0; background: transparent; padding: 6px 12px; border-radius: 4px; color: #626974; font-size: 12px; }
.form-themes button[aria-pressed=true] { color: #191c23; background: #fff; box-shadow: 0 1px 3px #1112; }
.demo-wrap { background: #f5f6f8; padding: 28px; }
.demo-wrap form { --form-ink: #191c23; --form-muted: #69717e; --form-line: #dfe3e8; --form-field: #fff; max-width: 100%; border: 1px solid #e2e5e9; border-radius: 12px; padding: 28px; background: #fff; color: var(--form-ink); }
.demo-wrap form[data-theme=dark] { --form-ink: #f2f4f8; --form-muted: #b2bac8; --form-line: #3c4553; --form-field: #1c232d; background: #171c24; border-color: #2e3643; color-scheme: dark; --id30-protection-success: #4ade80; --id30-protection-error: #fda29b; --id30-protection-accent: #93b4ff; --id30-protection-surface: #202733; }
.demo-wrap h3 { font-size: 23px; letter-spacing: -.65px; line-height: 1.25; }
.demo-wrap .form-intro { margin: 9px 0 25px; color: var(--form-muted); font-size: 13px; }
.demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.demo-fields label { display: grid; gap: 8px; font-size: 12px; font-weight: 500; }
.demo-fields .wide { grid-column: 1 / -1; }
.demo-fields input, .demo-fields textarea { box-sizing: border-box; border: 1px solid var(--form-line); border-radius: 6px; background: var(--form-field); color: var(--form-ink); width: 100%; min-width: 0; padding: 11px 12px; font: inherit; font-size: 14px; resize: vertical; }
.demo-fields textarea { min-height: 92px; }
.demo-fields input::placeholder, .demo-fields textarea::placeholder { color: var(--form-muted); opacity: 1; }
.demo-fields :is(input,textarea):focus-visible { outline: 2px solid #6b9bff; outline-offset: 2px; }
.demo-submit { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; }
.demo-submit .button { width: auto; min-height: 44px; margin: 0; padding: 10px 18px; border-radius: 6px; }
.demo-submit altcha-widget { --id30-protection-color: var(--form-muted); }
.demo-wrap #status { margin: 12px 0 0; min-height: 0; color: var(--form-muted); font-size: 12px; }
.demo-wrap #status:empty { display: none; }
.demo-note { margin: 18px 0 0; font-size: 12px; }
.compact-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.compact-facts span { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; color: var(--muted); }
.embed-code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; padding: 20px; background: #f5f6f8; border: 1px solid var(--line); border-radius: 6px; }
@media (max-width:1100px) { .forms-layout { grid-template-columns: 1fr; } }
@media (max-width:600px) { .demo-wrap { padding: 14px; } .demo-wrap form { padding: 20px; } .demo-fields { grid-template-columns: 1fr; } .demo-submit { gap: 4px 12px; } .demo-submit .button { flex-grow: 1; } }