:root{--primary:#7c3aed;--primary-dark:#6d28d9;--surface:#ffffff;--surface-muted:#f5f3ff;--border:#e9e5f0;--border-dark:#ddd6fe;--text-main:#1e1b4b;--text-muted:#6b7280;--success:#10b981;}
.fsona-tool{margin-bottom:2rem;}
.fsona-grid{display:flex;flex-direction:column;background:var(--surface);border-radius:1rem;border:1px solid var(--border);box-shadow:0 4px 24px rgba(30,27,75,0.06);overflow:hidden;}
@media (min-width:992px){.fsona-grid{display:grid;grid-template-columns:minmax(320px,400px) 1fr;min-height:400px;align-items:stretch;}}

.fsona-form-wrap{border-bottom:1px solid var(--border);}
@media (min-width:992px){.fsona-form-wrap{border-bottom:none;border-right:1px solid var(--border);}}
.fsona-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem;}
@media (min-width:768px){.fsona-form{padding:1.5rem;}}

.fsona-tip{display:flex;align-items:flex-start;gap:0.75rem;padding:0.75rem 1rem;font-size:0.9375rem;line-height:1.45;color:var(--text-muted);background:rgba(124,58,237,0.08);border-radius:0.5rem;border-left:3px solid var(--primary);margin:0;}
.fsona-tip-icon{flex-shrink:0;color:var(--primary);}

.fsona-fields{display:flex;flex-direction:column;gap:1rem;}
.fsona-field{display:flex;flex-direction:column;gap:0.375rem;}
.fsona-label{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;font-weight:600;font-size:0.9375rem;color:var(--text-main);}
.fsona-tooltip-wrap{position:relative;display:inline-flex;}
.fsona-tooltip-btn{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--border);color:var(--text-muted);font-size:0.75rem;font-weight:700;cursor:help;border:none;transition:background 0.2s,color 0.2s;}
.fsona-tooltip-btn:hover{background:var(--primary);color:#fff;}
.fsona-tooltip-text{visibility:hidden;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:200px;padding:0.5rem 0.75rem;font-size:0.8125rem;line-height:1.4;color:#fff;background:var(--text-main);border-radius:0.375rem;opacity:0;transition:opacity 0.2s,visibility 0.2s;z-index:5;}
.fsona-tooltip-wrap:hover .fsona-tooltip-text,.fsona-tooltip-wrap:focus-within .fsona-tooltip-text{visibility:visible;opacity:1;}
.fsona-select{width:100%;padding:0.75rem 1rem;font-size:1rem;color:var(--text-main);background:var(--surface);border:1px solid var(--border);border-radius:0.5rem;transition:border-color 0.2s,box-shadow 0.2s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;}
.fsona-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,0.18);}
.fsona-select:hover{border-color:var(--border-dark);}

.fsona-actions{padding-top:0.25rem;}
.fsona-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 1.25rem;font-size:1rem;font-weight:600;border-radius:0.5rem;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;border:none;width:100%;}
@media (min-width:480px){.fsona-btn{width:auto;min-width:160px;}}
.fsona-btn-icon{display:inline-flex;}
.fsona-btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;}
.fsona-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,58,237,0.35);}
.fsona-btn-primary:active{transform:translateY(0);}
.fsona-btn-primary:focus{outline:2px solid var(--primary);outline-offset:2px;}
.fsona-btn-primary.loading,.fsona-btn-primary:disabled{cursor:wait;opacity:0.9;}
.fsona-btn-primary.loading .fsona-btn-icon{animation:fsona-spin 0.8s linear infinite;}
@keyframes fsona-spin{to{transform:rotate(360deg);}}

.fsona-output{display:flex;flex-direction:column;min-height:280px;padding:1.25rem;}
@media (min-width:992px){.fsona-output{min-height:400px;padding:1.5rem;}}
.fsona-empty{display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;padding:2rem;background:var(--surface-muted);border:2px dashed var(--border);border-radius:0.75rem;}
.fsona-empty-inner{text-align:center;max-width:280px;}
.fsona-empty-icon{display:block;color:var(--primary);opacity:0.5;margin-bottom:1rem;}
.fsona-empty-title{font-size:1.125rem;font-weight:600;color:var(--text-main);margin:0 0 0.25rem;}
.fsona-empty-desc{font-size:0.9375rem;color:var(--text-muted);margin:0;line-height:1.45;}

.fsona-result-panel{display:flex;flex-direction:column;flex:1;overflow:auto;}
.fsona-result-head{padding:0.75rem 0;border-bottom:1px solid var(--border);}
.fsona-result-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin:0;}
.fsona-result-body{padding:1rem 0;flex:1;}
.fsona-result-actions{display:flex;flex-wrap:wrap;gap:0.5rem;padding-top:1rem;border-top:1px solid var(--border);}
.fsona-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem 1rem;font-size:0.875rem;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:0.5rem;cursor:pointer;transition:color 0.2s,border-color 0.2s,background 0.2s;}
.fsona-action-btn:hover{color:var(--primary);border-color:var(--primary);}
.fsona-action-btn:focus{outline:2px solid var(--primary);outline-offset:2px;}
.fsona-action-btn.copied{background:var(--success);border-color:var(--success);color:#fff;}
.fsona-action-ghost{background:transparent;}
.fsona-action-ghost:hover{background:var(--surface-muted);}

.fsona-card{background:var(--surface-muted);border-radius:0.75rem;padding:1.25rem;border:1px solid var(--border);transition:box-shadow 0.2s;}
.fsona-card:hover{box-shadow:0 4px 16px rgba(124,58,237,0.1);}
.fsona-card-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:1rem;}
.fsona-card-name{font-size:1.5rem;font-weight:700;color:var(--primary);margin:0;}
.fsona-species-badge{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:0.35rem 0.875rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;}
.fsona-details{display:grid;gap:0.75rem;margin-bottom:1rem;}
.fsona-detail-item{display:flex;flex-direction:column;gap:0.125rem;}
.fsona-detail-label{font-size:0.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;}
.fsona-detail-value{font-size:1rem;font-weight:600;color:var(--text-main);}
.fsona-traits{display:flex;flex-wrap:wrap;gap:0.5rem;}
.fsona-trait-badge{background:rgba(124,58,237,0.12);color:var(--primary);padding:0.35rem 0.75rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;}

.fsona-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:1rem;}
.fsona-modal[aria-hidden="false"]{display:flex;}
.fsona-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.5);cursor:pointer;}
.fsona-modal-box{position:relative;width:100%;max-width:420px;padding:1.5rem;background:var(--surface);border-radius:1rem;box-shadow:0 20px 48px rgba(15,23,42,0.2);border:1px solid var(--border);}
.fsona-modal-close{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:var(--text-muted);background:none;border:none;cursor:pointer;border-radius:0.375rem;transition:color 0.2s,background 0.2s;}
.fsona-modal-close:hover{color:var(--text-main);background:var(--surface-muted);}
.fsona-modal-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin:0 0 0.5rem;}
.fsona-modal-desc{font-size:0.9375rem;color:var(--text-muted);margin:0 0 1rem;}
.fsona-share-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;margin-bottom:1rem;}
.fsona-share-btn{padding:0.6rem 1rem;font-size:0.875rem;font-weight:600;color:#fff;border:none;border-radius:0.5rem;cursor:pointer;transition:transform 0.15s,opacity 0.15s;}
.fsona-share-btn:hover{transform:translateY(-1px);opacity:0.95;}
.fsona-share-fb{background:#1877f2;}
.fsona-share-tw{background:#1da1f2;}
.fsona-share-wa{background:#25d366;}
.fsona-share-rd{background:#ff4500;}
.fsona-modal-copy-label{font-size:0.875rem;font-weight:600;color:var(--text-main);margin:0 0 0.5rem;}
.fsona-modal-url-row{display:flex;gap:0.5rem;}
.fsona-modal-url-input{flex:1;padding:0.5rem 0.75rem;font-size:0.875rem;border:1px solid var(--border);border-radius:0.5rem;background:var(--surface-muted);color:var(--text-main);}
.fsona-modal-copy-btn{padding:0.5rem 1rem;font-size:0.875rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:0.5rem;cursor:pointer;transition:background 0.2s;}
.fsona-modal-copy-btn:hover{background:var(--primary-dark);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.fsona-result-panel.success-animation{animation:fsona-pulse 0.5s ease-out;}
@keyframes fsona-pulse{0%{opacity:1;}50%{opacity:0.92;}100%{opacity:1;}}

@media (prefers-reduced-motion:reduce){.fsona-btn,.fsona-action-btn,.fsona-share-btn,.fsona-card,.fsona-tooltip-text{transition:none;}.fsona-btn-primary.loading .fsona-btn-icon{animation:none;}}