.feedback-widget{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);animation:fadeIn .3s ease-out}.feedback-header{text-align:center;margin-bottom:var(--space-md)}.feedback-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-xs)}.feedback-subtitle{font-size:var(--text-sm);color:var(--color-text-muted)}.feedback-rating{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}.feedback-rating-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md);min-width:100px;background:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);font-size:var(--text-sm);color:var(--color-text-secondary)}.feedback-rating-btn:hover{border-color:var(--color-border-hover);transform:translateY(-2px)}.feedback-rating-btn.selected{border-color:var(--color-accent-primary);background:var(--color-accent-subtle);color:var(--color-text-primary)}.feedback-rating-btn .icon{font-size:1.75rem}.feedback-comment{margin-bottom:var(--space-md)}.feedback-textarea{width:100%;min-height:80px;padding:var(--space-md);font-size:var(--text-sm);font-family:var(--font-sans);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);resize:vertical;transition:border-color var(--transition-fast)}.feedback-textarea:focus{outline:none;border-color:var(--color-accent-primary)}.feedback-textarea::placeholder{color:var(--color-text-muted)}.feedback-honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;pointer-events:none}.feedback-privacy{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);background:var(--color-success-subtle);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-secondary)}.feedback-privacy .icon{font-size:1rem;flex-shrink:0}.feedback-actions{display:flex;justify-content:center;gap:var(--space-md)}.feedback-success{text-align:center;padding:var(--space-lg)}.feedback-success .icon{font-size:2.5rem;margin-bottom:var(--space-sm)}.feedback-success-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-xs)}.feedback-success-subtitle{font-size:var(--text-sm);color:var(--color-text-muted)}.feedback-loading{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-lg);color:var(--color-text-muted)}.feedback-dismiss{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:var(--space-xs);background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;font-size:1rem;line-height:1}.feedback-dismiss:hover{color:var(--color-text-primary)}.feedback-widget.collapsed{padding:var(--space-md)}.feedback-widget.collapsed .feedback-header{margin-bottom:0}.feedback-widget.collapsed .feedback-title{font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);cursor:pointer}@media(max-width:480px){.feedback-rating{flex-direction:column;gap:var(--space-sm)}.feedback-rating-btn{flex-direction:row;min-width:100%;justify-content:center}.feedback-rating-btn .icon{font-size:1.5rem}}.how-to-section{margin-top:var(--space-xl);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-xl);overflow:hidden}.how-to-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);background:transparent;border:none;cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);transition:all var(--transition-base)}.how-to-toggle:hover{color:var(--color-text-primary);background:var(--glass-bg-strong)}.how-to-chevron{font-size:.65em;transition:transform var(--transition-base);opacity:.6}.how-to-chevron.expanded{transform:rotate(180deg)}.how-to-content{padding:0 var(--space-lg) var(--space-lg);animation:slideDown .25s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.how-to-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg);padding:var(--space-xs);background:var(--color-bg-secondary);border-radius:var(--radius-full);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.how-to-tabs::-webkit-scrollbar{display:none}.how-to-tab{flex-shrink:0;padding:var(--space-sm) var(--space-md);background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);transition:all var(--transition-base);white-space:nowrap}.how-to-tab:hover{color:var(--color-text-primary);background:var(--color-bg-tertiary)}.how-to-tab.active{background:var(--color-cta-primary);color:#fff;box-shadow:0 2px 8px var(--color-cta-subtle)}.how-to-panel{animation:slideDown .2s ease}.how-to-panel h3{font-size:var(--text-base);font-weight:600;margin:0 0 var(--space-md);color:var(--color-text-primary)}.how-to-panel h4{font-size:var(--text-sm);font-weight:600;margin:var(--space-lg) 0 var(--space-sm);color:var(--color-text-primary)}.how-to-panel p{margin:0 0 var(--space-sm);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7}.how-to-steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-md)}.how-to-step{display:flex;gap:var(--space-md);align-items:flex-start;padding:var(--space-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-base)}.how-to-step:hover{border-color:var(--color-border-hover);transform:translate(4px)}.step-number{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-cta-primary) 0%,var(--color-cta-hover) 100%);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:700;box-shadow:0 2px 8px var(--color-cta-subtle)}.step-content{flex:1;min-width:0}.step-content strong{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);margin-bottom:4px}.step-content p{margin:0;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5}.use-cases-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-sm)}.use-cases-list li{position:relative;padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5;background:var(--color-bg-secondary);border-radius:var(--radius-md);transition:all var(--transition-base)}.use-cases-list li:hover{background:var(--color-bg-tertiary);transform:translate(4px)}.use-cases-list li:before{content:"→";position:absolute;left:var(--space-md);color:var(--color-cta-primary);font-weight:600}.safety-points{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-sm)}.safety-points li{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);font-size:var(--text-sm);color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:var(--radius-md)}.safety-points .safety-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-success) 0%,#4ade80 100%);color:#fff;border-radius:50%;font-size:10px;font-weight:700}.faq-list{display:grid;gap:var(--space-sm)}.faq-item{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base)}.faq-item:hover{border-color:var(--color-border-hover)}.faq-item[open]{border-color:var(--color-cta-primary);box-shadow:0 4px 12px var(--color-cta-subtle)}.faq-item summary{padding:var(--space-md);cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary);background:transparent;list-style:none;display:flex;align-items:center;gap:var(--space-sm);transition:background var(--transition-base)}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:before{content:"+";flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-tertiary);border-radius:50%;font-weight:700;font-size:var(--text-sm);color:var(--color-text-muted);transition:all var(--transition-base)}.faq-item[open] summary:before{content:"−";background:var(--color-cta-primary);color:#fff}.faq-item summary:hover{background:var(--glass-bg-strong)}.faq-item p{padding:0 var(--space-md) var(--space-md);padding-left:calc(var(--space-md) + 24px + var(--space-sm));margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--color-text-secondary);animation:slideDown .2s ease}.how-to-privacy-note{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md);background:var(--color-success-subtle);border:1px solid rgba(34,197,94,.2);border-radius:var(--radius-lg);font-size:var(--text-xs);color:var(--color-text-secondary)}.privacy-icon{flex-shrink:0;font-size:1.25rem}.how-to-privacy-note p{margin:0;line-height:1.5}@media(max-width:480px){.how-to-section{margin-top:var(--space-lg);border-radius:var(--radius-lg)}.how-to-toggle{padding:var(--space-sm) var(--space-md);font-size:var(--text-xs)}.how-to-content{padding:0 var(--space-md) var(--space-md)}.how-to-tabs{margin-bottom:var(--space-md)}.how-to-tab{padding:var(--space-xs) var(--space-sm);font-size:11px}.how-to-step{padding:var(--space-sm)}.step-number{width:28px;height:28px;font-size:var(--text-xs)}.faq-item summary,.faq-item p{font-size:var(--text-xs)}.faq-item summary:before{width:20px;height:20px;font-size:11px}.faq-item p{padding-left:calc(var(--space-md) + 20px + var(--space-xs))}}.tool-shell-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.tool-back-button{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.tool-back-button:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-border-hover);transform:translate(-4px)}.tool-back-button:active{transform:translate(-2px) scale(.98)}.tool-content{flex:1;display:flex;flex-direction:column;gap:var(--space-lg)}.page-header{position:relative;padding:var(--space-xl) 0;text-align:center}.page-header:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,var(--color-cta-subtle) 0%,transparent 70%);pointer-events:none;z-index:-1}.page-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-description{color:var(--color-text-muted);font-size:var(--text-base);max-width:480px;margin:0 auto;line-height:1.5}@media(max-width:480px){.tool-shell-header{margin-bottom:var(--space-md);padding-bottom:var(--space-sm)}.tool-back-button{padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs)}.page-header{padding:var(--space-lg) 0}.page-title{font-size:var(--text-xl)}.page-description{font-size:var(--text-sm)}.page-header:before{width:150px;height:150px}}
