@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Outfit:wght@400;700&display=swap";
:root{--background:#0f0c29;--background-gradient:linear-gradient(135deg,#0f0c29,#302b63,#24243e);--primary:#f0c;--primary-gradient:linear-gradient(to right,#f0c,#339);--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--text-main:#fff;--text-muted:#a0a0a0;--card-radius:20px;--transition:all .3s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--background-gradient);color:var(--text-main);background-attachment:fixed;min-height:100vh;font-family:Outfit,Noto Sans JP,sans-serif;overflow-x:hidden}.container{max-width:800px;margin:0 auto;padding:40px 20px}h1{text-align:center;background:var(--primary-gradient);-webkit-text-fill-color:transparent;text-shadow:0 10px 20px #0003;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:3rem;font-weight:700}.subtitle{text-align:center;color:var(--text-muted);margin-bottom:40px;font-size:1.1rem}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--card-radius);transition:var(--transition);margin-bottom:20px;padding:30px;box-shadow:0 8px 32px #0000005e}.glass-card:hover{border-color:#fff3;transform:translateY(-2px)}.input-group{margin-bottom:20px}label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:.9rem;font-weight:700;display:block}input[type=text],textarea{border:1px solid var(--glass-border);color:#fff;width:100%;transition:var(--transition);background:#0003;border-radius:12px;padding:15px;font-family:inherit;font-size:1rem}input[type=text]:focus,textarea:focus{border-color:var(--primary);background:#0006;outline:none}.file-upload{border:2px dashed var(--glass-border);text-align:center;cursor:pointer;transition:var(--transition);background:#0000001a;border-radius:12px;padding:40px;position:relative}.file-upload:hover,.file-upload.drag-active{border-color:var(--primary);background:#ff00cc1a;transform:scale(1.02)}.file-upload input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}@media (max-width:600px){.container{padding:20px 15px}h1{font-size:2rem}.glass-card,.file-upload{padding:20px}.tone-labels{font-size:.75rem}.btn-primary,.btn-secondary{padding:14px;font-size:1rem}}.preview-image{border-radius:12px;max-width:100%;margin-top:20px;box-shadow:0 4px 12px #0000004d}.btn-primary{background:var(--primary-gradient);color:#fff;cursor:pointer;width:100%;transition:var(--transition);text-transform:uppercase;letter-spacing:.05em;border:none;border-radius:12px;padding:18px;font-size:1.1rem;font-weight:700;box-shadow:0 4px 15px #ff00cc4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff00cc80}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading-spinner{vertical-align:middle;border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:24px;height:24px;margin-right:10px;animation:1s ease-in-out infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.result-box{white-space:pre-wrap;border-left:4px solid var(--primary);background:#ffffff1a;border-radius:12px;margin-top:20px;padding:20px;font-size:1.2rem;line-height:1.6}.relative{position:relative}.flex-between{justify-content:space-between;align-items:center;display:flex}.mb-8{margin-bottom:8px}.mb-0{margin-bottom:0}.mt-5{margin-top:5px}.mt-10{margin-top:10px}.text-sm{font-size:.8rem}.text-muted{color:var(--text-muted)}.download-btn{color:#fff;cursor:pointer;z-index:10;background:#000000b3;border:1px solid #ffffff4d;border-radius:8px;padding:8px 12px;font-size:.9rem;position:absolute;bottom:10px;right:10px}.template-btn{border:1px solid var(--glass-border);color:var(--text-muted);cursor:pointer;transition:var(--transition);background:#ffffff1a;border-radius:6px;padding:4px 8px;font-size:.8rem}.template-btn:hover{background:#fff3}.textarea-resize{resize:vertical;min-height:100px}.tone-slider{cursor:pointer;accent-color:#f0c;width:100%}.tone-labels{color:var(--text-muted);justify-content:space-between;margin-top:10px;font-size:.9rem;display:flex}.tone-label-active{color:var(--primary);font-weight:700}.tone-container{padding:10px 0}.model-select{border:1px solid var(--glass-border);color:#fff;cursor:pointer;width:100%;transition:var(--transition);background:#0003;border-radius:12px;padding:15px;font-family:inherit;font-size:1rem}.model-select:hover{border-color:var(--primary);background:#0000004d}.model-select:focus{border-color:var(--primary);background:#0006;outline:none}.model-select option{color:#fff;background:#1a1a2e}.share-btn-group{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:20px;display:grid}.share-btn{color:#fff;cursor:pointer;width:100%;transition:var(--transition);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:.9rem;font-weight:700;display:flex}.share-btn:hover{opacity:.9;transform:translateY(-2px)}.btn-copy{background:#ffffff1a;border:1px solid #fff3}.btn-x{background:#000;border:1px solid #333}.btn-bluesky{background:#0560ff}.btn-line{background:#06c755}.warning-text{color:#f0c;text-align:center;background:#ff00cc1a;border-radius:8px;margin-bottom:10px;padding:10px;font-size:.8rem;font-weight:700}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.5s fadeIn}.hidden{display:none}.loading-spinner-sm{border-width:2px;width:20px;height:20px}.mt-20{margin-top:20px}.btn-secondary{color:#fff;cursor:pointer;width:100%;transition:var(--transition);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:15px;padding:15px;font-size:1rem;font-weight:700;display:flex}.btn-secondary:hover{background:#fff3;transform:translateY(-2px)}.btn-secondary:disabled{opacity:.6;cursor:not-allowed;transform:none}