def get_css(): return """ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap'); /* === 基本設定 === */ body, .gradio-container, .prose, button, input, textarea, span, div, label { font-family: 'JetBrains Mono', monospace !important; letter-spacing: -0.03em; } body, .gradio-container { background-color: #020617 !important; background-image: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 80%); color: #34d399 !important; } /* === タイトル === */ .title-area { margin-bottom: 20px; text-align: center; padding-top: 20px; border-bottom: 1px solid rgba(52, 211, 153, 0.2); padding-bottom: 10px; } .title-area h1 { font-size: 2.5rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #34d399 !important; text-shadow: 0 0 15px rgba(52, 211, 153, 0.3); margin-bottom: 0.2rem; } .subtitle { font-size: 0.75rem !important; color: #6ee7b7 !important; opacity: 0.8; } /* === 枠 (Glass Frame) === */ .step-frame { background: rgba(2, 6, 23, 0.7) !important; border: 1px solid #10b981 !important; border-radius: 4px !important; padding: 12px 16px !important; margin-bottom: 12px !important; transition: all 0.3s ease !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.05); /* 右パネルは高さを確保 */ height: 100%; display: flex; flex-direction: column; } /* 特定IDで微調整する場合 */ #right-panel { min-height: 600px; } .step-active { border-color: #34d399 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important; opacity: 1 !important; } .step-inactive { border-color: #1e293b !important; opacity: 0.3 !important; pointer-events: none; } .step-label { font-size: 0.75rem; font-weight: 700; color: #34d399 !important; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; text-shadow: 0 0 5px rgba(52, 211, 153, 0.4); } /* === 入力パーツ === */ label span { font-size: 0.7rem !important; margin-bottom: 4px !important; color: #6ee7b7 !important; } textarea, input { background-color: #020617 !important; border: 1px solid #10b981 !important; color: #34d399 !important; border-radius: 2px !important; font-size: 0.9rem !important; padding: 4px 8px !important; } ::placeholder { color: #059669 !important; opacity: 0.7; } textarea:focus, input:focus { border-color: #34d399 !important; box-shadow: 0 0 10px rgba(52, 211, 153, 0.2) !important; } input[type=number] { color: #34d399 !important; } /* === タスクカード & ボタン === */ button { text-transform: uppercase !important; letter-spacing: 0.05em !important; font-weight: 700 !important; border-radius: 2px !important; } .task-card { height: 45px !important; min-height: 45px !important; background: #0f172a !important; border: 1px solid #10b981 !important; color: #34d399 !important; font-size: 0.75rem !important; } .task-card:hover { background: #10b981 !important; color: #020617 !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); } /* === チャット入力エリア (Step 3) === */ .input-area { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; /* 下部に固定 */ padding-top: 10px; } #prompt-preview textarea { background-color: #1e293b !important; border: 1px solid #34d399 !important; color: #34d399 !important; font-size: 0.85rem !important; line-height: 1.4 !important; } #send-btn { background: #34d399 !important; color: #020617 !important; border: none !important; width: 50px !important; height: 50px !important; font-size: 1.5rem !important; border-radius: 8px !important; display: flex; align-items: center; justify-content: center; padding-bottom: 4px !important; transition: all 0.2s ease; } #send-btn:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(52, 211, 153, 0.6); } /* === チャットボット (バブルデザイン) === */ .bubble-wrap { background: transparent !important; } .user { background-color: #1e293b !important; color: #34d399 !important; border: 1px solid #10b981 !important; border-radius: 12px 12px 0 12px !important; padding: 12px !important; margin-bottom: 8px !important; text-align: right; margin-left: auto; max-width: 80%; } .bot { background-color: #020617 !important; color: #34d399 !important; border: 1px solid #34d399 !important; border-radius: 12px 12px 12px 0 !important; padding: 12px !important; margin-bottom: 16px !important; text-align: left; margin-right: auto; max-width: 80%; box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); } /* アバター隠し */ .avatar-container { display: none !important; } /* === 実行秒数・タイマー・API表示を非表示にする設定 === */ .generating, .progress-text, .meta-text, .meta-text-center, .eta-bar, footer { display: none !important; } /* 読み込み中のくるくる(スピン)は残したい場合はここを調整 */ .loading-wrap { display: none !important; } """