@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap";:root{--primary: #6366f1;--primary-hover: #4f46e5;--bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .75);--border: rgba(255, 255, 255, .1);--text: #f8fafc;--muted: #94a3b8;--input-bg: rgba(15, 23, 42, .6);--error-bg: rgba(239, 68, 68, .12);--error-border: rgba(239, 68, 68, .35);--error-text: #fca5a5;--success-bg: rgba(16, 185, 129, .1);--success-border: rgba(16, 185, 129, .3);--success-text: #6ee7b7;--warn-bg: rgba(234, 179, 8, .1);--warn-border: rgba(234, 179, 8, .3);--warn-text: #fde68a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Noto Sans JP,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}.app-container{max-width:960px;margin:0 auto;padding:2rem 1rem 5rem}.hero-header{text-align:center;margin-bottom:2rem;animation:fadeInDown .6s ease-out}.hero-header h1{font-size:2rem;font-weight:700;background:linear-gradient(to right,#a855f7,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.4rem;letter-spacing:-.03em}.hero-header p{color:var(--muted);font-size:.95rem}.main-content{display:flex;flex-direction:column;gap:1rem}.step-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-left:.25rem;margin-top:.5rem}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;padding:1.6rem;box-shadow:0 8px 24px -8px #00000080;animation:fadeInUp .5s ease-out}.card h2{font-size:1.15rem;font-weight:600;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem}.icon{font-size:1.1rem}.settings-bar{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:12px;overflow:hidden}.settings-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.2rem;background:transparent;border:none;color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s}.settings-toggle:hover{background:#ffffff0d}.toggle-right{display:flex;align-items:center;gap:.75rem}.badge-ok{background:#10b98126;color:var(--success-text);border:1px solid rgba(16,185,129,.3);border-radius:20px;font-size:.72rem;font-weight:600;padding:.12rem .55rem}.chevron{font-size:1rem;transition:transform .25s}.chevron.open{transform:rotate(180deg)}.settings-panel{padding:1.2rem;border-top:1px solid var(--border)}.settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9rem;margin-bottom:.9rem}@media(max-width:720px){.settings-grid{grid-template-columns:1fr}}.input-group-sm{display:flex;flex-direction:column;gap:.35rem}.input-group-sm label{font-size:.76rem;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.required{background:#ef444426;color:#f87171;border-radius:4px;font-size:.68rem;padding:.1rem .4rem}.optional{color:var(--muted);font-size:.68rem;font-weight:400}.input-group-sm input{width:100%;padding:.5rem .7rem;background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.82rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}.input-group-sm input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f133}.settings-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem}small{color:var(--muted);font-size:.76rem}.btn-save{padding:.45rem 1.1rem;background:var(--primary);color:#fff;border:none;border-radius:7px;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}.btn-save:hover{background:var(--primary-hover)}.help-btn{padding:.08rem .45rem;background:#6366f126;color:#a5b4fc;border:1px solid rgba(99,102,241,.35);border-radius:4px;font-size:.68rem;cursor:pointer;transition:background .2s}.help-btn:hover{background:#6366f14d}textarea{width:100%;padding:.9rem 1rem;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.97rem;font-family:inherit;resize:vertical;transition:border-color .2s,box-shadow .2s;margin-bottom:1rem}textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f133}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:.97rem;font-weight:600;cursor:pointer;transition:background .2s,transform .15s;font-family:inherit}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.generate-btn{width:100%}.send-btn{font-size:.88rem;padding:.6rem 1rem}.gen-image-btn{width:100%;font-size:1rem;padding:.9rem;margin-top:0}.btn-secondary{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .9rem;background:#ffffff14;color:var(--text);border:1px solid var(--border);border-radius:7px;font-size:.85rem;font-weight:500;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .2s,transform .15s;white-space:nowrap}.btn-secondary:hover{background:#ffffff24;transform:translateY(-1px)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed;transform:none}.link-btn{background:none;border:none;color:#a5b4fc;text-decoration:underline;font-size:.85rem;cursor:pointer;padding:0 .25rem}.msg{padding:.8rem 1.1rem;border-radius:8px;font-size:.87rem;font-weight:500}.msg-error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text)}.msg-success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text)}.inline-hint{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:8px;padding:.65rem 1rem;font-size:.83rem;color:var(--warn-text);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.7rem}.action-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.table-wrapper{overflow-x:auto;border-radius:8px;border:1px solid var(--border)}table{width:100%;border-collapse:collapse}th,td{padding:.65rem .9rem;border-bottom:1px solid var(--border);text-align:left}th{background:#00000040;font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff05}.col-num{width:52px;text-align:center}.col-answer{width:120px}td input{width:100%;padding:.38rem .5rem;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text);font-size:.88rem;font-family:inherit;transition:background .15s,border-color .15s}td input:hover{background:#ffffff0a;border-color:#ffffff1a}td input:focus{outline:none;background:var(--input-bg);border-color:var(--primary);box-shadow:0 0 0 2px #6366f133}.selector-label{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.06em}.grade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.4rem}@media(max-width:640px){.grade-grid{grid-template-columns:repeat(2,1fr)}}.grade-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.65rem .5rem;background:#ffffff0d;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all .18s;font-family:inherit;color:var(--muted)}.grade-btn:hover{background:#6366f11f;border-color:#6366f166;color:var(--text)}.grade-btn.active{background:#6366f133;border-color:var(--primary);color:var(--text);box-shadow:0 0 0 3px #6366f12e}.grade-name{font-size:.9rem;font-weight:700}.grade-sub{font-size:.68rem}.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}@media(max-width:640px){.model-grid{grid-template-columns:repeat(2,1fr)}}.model-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .5rem;background:#ffffff0d;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all .18s;font-family:inherit;color:var(--muted)}.model-btn:hover{background:#a855f71f;border-color:#a855f766;color:var(--text)}.model-btn.active{background:#a855f72e;border-color:#a855f7;color:var(--text);box-shadow:0 0 0 3px #a855f726}.model-name{font-size:.82rem;font-weight:700}.model-badge{font-size:.65rem;background:#ffffff1a;padding:.1rem .45rem;border-radius:20px}.model-btn.active .model-badge{background:#a855f74d}.model-label-row{display:flex;align-items:center;gap:.75rem}.fetch-models-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .75rem;background:#6366f126;color:#a5b4fc;border:1px solid rgba(99,102,241,.35);border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}.fetch-models-btn:hover:not(:disabled){background:#6366f147}.fetch-models-btn:disabled{opacity:.6;cursor:not-allowed}.model-empty{padding:.9rem 1rem;background:#ffffff0a;border:1px dashed var(--border);border-radius:8px;font-size:.85rem;color:var(--muted)}.generate-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}.summary-text{font-size:.9rem;color:var(--muted)}.summary-text strong{color:var(--text)}.generate-btn{flex-shrink:0}.grade-tag{font-size:.72rem;font-weight:600;background:#6366f133;color:#a5b4fc;border:1px solid rgba(99,102,241,.3);border-radius:20px;padding:.1rem .6rem;margin-left:.5rem;vertical-align:middle}.phase2-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}@media(max-width:640px){.phase2-grid{grid-template-columns:1fr}}.field-label{font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:.6rem}.field-hint{font-size:.78rem;color:var(--muted);margin-top:.5rem}.template-dropzone{width:100%;aspect-ratio:4/3;background:var(--input-bg);border:2px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;overflow:hidden;position:relative}.template-dropzone:hover{border-color:var(--primary);background:#6366f10f}.template-dropzone.has-image{border-style:solid}.dropzone-hint{text-align:center;color:var(--muted);font-size:.85rem;line-height:1.8}.template-thumb{width:100%;height:100%;object-fit:contain}.file-name{font-size:.75rem;color:var(--muted);margin-top:.4rem}.fetch-area{display:flex;flex-direction:column;gap:0}.fetch-btn{align-self:flex-start}.sheet-preview{margin-top:.8rem}.preview-label{font-size:.78rem;color:var(--success-text);margin-bottom:.4rem}.preview-scroll{overflow-x:auto;border-radius:6px;border:1px solid var(--border);max-height:180px;overflow-y:auto}.preview-table{width:100%;border-collapse:collapse;font-size:.8rem}.preview-table td{padding:.4rem .6rem;border-bottom:1px solid var(--border)}.preview-table tr:last-child td{border-bottom:none}.more-rows{text-align:center;color:var(--muted);font-size:.75rem;padding:.4rem}.generate-image-area{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}.generated-images{margin-top:1rem}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:.6rem}.image-card{display:flex;flex-direction:column;gap:.6rem}.generated-img{width:100%;border-radius:8px;border:1px solid var(--border)}.download-img-btn{width:100%;justify-content:center}.spinner{display:inline-block;width:1.1rem;height:1.1rem;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.spinner-sm{display:inline-block;width:.85rem;height:.85rem;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.modal-overlay{position:fixed;inset:0;background:#000000b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal-content{background:#1e293b;border:1px solid var(--border);border-radius:16px;padding:1.75rem;max-width:700px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px #0009}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.modal-header h3{font-size:1.1rem;font-weight:600}.modal-close{background:#ffffff14;border:none;color:var(--text);width:30px;height:30px;border-radius:50%;font-size:.9rem;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#ffffff2e}.gas-steps{padding-left:1.4rem;margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.5rem}.gas-steps li{font-size:.88rem;color:var(--muted);line-height:1.6}.gas-steps strong{color:var(--text)}.gas-steps code{font-family:monospace;background:#6366f126;color:#a5b4fc;border-radius:4px;padding:.1em .4em;font-size:.85em}.code-container{background:#0006;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:1rem}.code-block{font-family:Consolas,Monaco,monospace;font-size:.75rem;color:#94a3b8;white-space:pre;overflow-x:auto;padding:1rem;line-height:1.6;margin:0}.btn-copy-code{width:100%;padding:.7rem;background:#6366f12e;color:#a5b4fc;border:1px solid rgba(99,102,241,.4);border-radius:8px;font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s;font-family:inherit}.btn-copy-code:hover{background:#6366f152}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.slide-up{animation:fadeInUp .4s ease-out}@media(max-width:600px){.hero-header h1{font-size:1.6rem}.card{padding:1.2rem}.results-header{flex-direction:column;align-items:flex-start}.action-buttons{width:100%}.send-btn{width:100%;justify-content:center}}