/* フォーム作成ツール共通スタイル（全ページで読み込み） */

/* --- ログイン・初回セットアップ --- */
.auth-card {
    max-width: 400px;
    margin: var(--spacing-4xl) auto;
    background: var(--bg-lighter);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
}

.auth-card h2 {
    margin-bottom: var(--spacing-xl);
}

.form-error {
    color: #e53e3e;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9em;
}

.form-success {
    color: #2f855a;
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9em;
}

/* --- ページ上部の操作バー（一覧・ビルダー・回答画面で共通） --- */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.page-toolbar h2 {
    margin-bottom: 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary-hover);
    cursor: pointer;
    font-size: 0.95em;
    text-decoration: underline;
    padding: 0;
}

.btn-danger {
    background: var(--bg-white);
    color: #e53e3e;
    border: 2px solid #feb2b2;
    padding: 8px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-danger:hover {
    background: #fff5f5;
}

/* --- マイフォーム一覧 --- */
.list-filter-bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.list-filter-bar #searchInput {
    max-width: 280px;
    flex: 1 1 200px;
}

.status-filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.status-filter-btn {
    background: var(--bg-white);
    color: var(--text-muted);
    border: 2px solid var(--border-light);
    padding: 8px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.status-filter-btn:hover {
    background: var(--primary-lighter);
}

.status-filter-btn.active {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

.form-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.form-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-white);
}

.form-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.form-card-head h3 {
    font-size: 1.05em;
    color: var(--text-secondary);
    word-break: break-word;
}

.form-card-url {
    font-size: 0.85em;
    color: var(--text-tertiary);
    word-break: break-all;
    margin-bottom: var(--spacing-sm);
}

.status-badge {
    flex-shrink: 0;
    font-size: 0.75em;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.status-badge.status-published {
    background: #e6fffa;
    color: #2c7a7b;
}

.status-badge.status-draft {
    background: var(--bg-light);
    color: var(--text-muted);
}

.form-card-meta {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-bottom: var(--spacing-lg);
}

.form-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.form-card-actions .btn-secondary,
.form-card-actions .btn-danger {
    padding: 6px 14px;
    font-size: 0.85em;
}