.board-form { padding: 1rem; max-width: 800px; margin: 0 auto; position: relative; padding-bottom: 5rem; } .board-form h2 { font-size: 1.5rem; font-weight: 600; color: #1f2937; margin: 0 0 1.5rem 0; } .form-card { background: white; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .form-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; } .form-section h3 { font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 1rem 0; } /* Toggle switch */ .toggle-field { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; } .toggle-field input[type="checkbox"] { display: none; } .toggle-slider { position: relative; width: 48px; height: 26px; background: #d1d5db; border-radius: 13px; transition: background 0.2s; flex-shrink: 0; } .toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .toggle-field input:checked + .toggle-slider { background: #6366f1; } .toggle-field input:checked + .toggle-slider::after { transform: translateX(22px); } .toggle-label { font-size: 0.95rem; color: #374151; } /* Invite link section */ .invite-link-section { margin-top: 1rem; } .invite-url-row { display: flex; gap: 8px; margin-bottom: 8px; } .invite-url-input { flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; background: #f9fafb; color: #374151; font-family: monospace; } .copy-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #6366f1; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1.1rem; transition: background 0.2s; flex-shrink: 0; } .copy-btn:hover { background: #4f46e5; } .invite-hint { margin-top: 8px; font-size: 0.85rem; color: #6b7280; }