*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #9B8BB8;--color-peach: #F5C5B8;--color-mint: #B8D4B8;--color-cream: #FAF8F5;--color-text: #2D2D2D;--color-text-light: #666;--color-text-lighter: #999;--color-white: #FFFFFF;--color-gray: #E5E5E5;--color-success: #4CAF50;--color-error: #F44336;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--transition: all .2s ease;--transition-slow: all .3s ease}html{font-size:16px}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--color-cream);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;color:var(--color-text)}h1{font-size:36px;font-weight:700}h2{font-size:24px;font-weight:600}p{margin:0}button,input,a{transition:var(--transition)}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit}@media(max-width:640px){html{font-size:14px}h1{font-size:28px}h2{font-size:20px}}.motif-container{max-width:600px;margin:0 auto;padding:32px 24px;min-height:100vh}.motif-header{text-align:center;margin-bottom:40px}.motif-logo{width:75px;height:auto;margin:0 auto 20px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1))}.motif-title{font-size:36px;font-weight:700;margin-bottom:8px;color:var(--color-text)}.motif-subtitle{font-size:16px;color:var(--color-text-light);font-weight:400}.motif-card{background:var(--color-white);border-radius:12px;padding:32px;box-shadow:var(--shadow-md);margin-bottom:40px;animation:fadeIn .3s ease-in}.motif-form{display:flex;flex-direction:column;gap:16px}.motif-input{width:100%;padding:14px 16px;font-size:16px;border:2px solid var(--color-gray);border-radius:8px;background:var(--color-white);color:var(--color-text);transition:var(--transition)}.motif-input::placeholder{color:var(--color-text-lighter)}.motif-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #9b8bb81a}.motif-input:disabled{background:var(--color-gray);cursor:not-allowed;opacity:.6}.motif-button{width:100%;padding:14px 24px;font-size:16px;font-weight:600;color:var(--color-white);background:var(--color-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition);position:relative}.motif-button:hover:not(:disabled){background:#8a7aa5;transform:translateY(-1px);box-shadow:0 4px 12px #9b8bb84d}.motif-button:active:not(:disabled){transform:translateY(0)}.motif-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.motif-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--color-white);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.motif-status{margin-top:20px;display:flex;justify-content:center}.motif-status-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:500;transition:var(--transition)}.motif-status-badge.queued{background:var(--color-gray);color:var(--color-text)}.motif-status-badge.processing{background:var(--color-primary);color:var(--color-white);animation:pulse 2s ease-in-out infinite}.motif-status-badge.completed{background:var(--color-success);color:var(--color-white)}.motif-status-badge.failed{background:var(--color-error);color:var(--color-white)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.motif-status-error{margin-top:16px;padding:12px 16px;background:#f443361a;border:1px solid var(--color-error);border-radius:8px;color:var(--color-error);font-size:14px;text-align:center}.motif-audio{margin-top:24px;width:100%;border-radius:8px;overflow:hidden}.motif-audio audio{width:100%;outline:none}.motif-history{margin-top:40px}.motif-history-title{font-size:24px;font-weight:600;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--color-gray)}.motif-history-empty{text-align:center;color:var(--color-text-lighter);padding:40px 20px;font-size:14px}.motif-history-loading{text-align:center;color:var(--color-text-light);padding:20px;font-size:14px}.motif-history-error{text-align:center;color:var(--color-error);padding:20px;font-size:14px}.motif-history-card{background:var(--color-white);border:1px solid var(--color-gray);border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:var(--transition);animation:fadeIn .3s ease-in;position:relative}.motif-history-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}.motif-history-card-prompt{font-size:16px;font-weight:500;color:var(--color-text);margin-bottom:12px;line-height:1.5}.motif-history-card-meta{font-size:13px;color:var(--color-text-light);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px}.motif-history-card-meta-item{display:flex;align-items:center;gap:4px}.motif-history-card-audio{margin-bottom:16px;border-radius:8px;overflow:hidden}.motif-history-card-audio audio{width:100%;outline:none}.motif-history-card-actions{display:flex;justify-content:flex-end}.motif-delete-button{padding:8px;background:transparent;color:var(--color-text-light);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition);cursor:pointer}.motif-delete-button:hover{background:#f443361a;color:var(--color-error)}.motif-delete-icon{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.motif-container{padding:20px 16px}.motif-card{padding:24px 20px}.motif-title{font-size:28px}.motif-subtitle{font-size:14px}.motif-logo{width:65px;margin-bottom:16px}.motif-history-title{font-size:20px}.motif-history-card{padding:16px}.motif-history-card-prompt{font-size:15px}.motif-history-card-meta{font-size:12px}}