:root {
    --jojo-accent: #c2410c;
    --jojo-accent-light: #fff7ed;
    --jojo-accent-hover: #9a3412;
    --jojo-surface: #ffffff;
    --jojo-muted: #f8fafc;
    --jojo-border: #e2e8f0;
    --jojo-text: #0f172a;
    --jojo-text-muted: #64748b;
    --jojo-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    --jojo-radius: 1rem;
    --jojo-radius-sm: 0.5rem;
    --primary: var(--jojo-accent);
    --primary-dark: var(--jojo-accent-hover);
    --border: var(--jojo-border);
    --surface: var(--jojo-surface);
    --shadow-soft: var(--jojo-shadow);
    --surface-muted: var(--jojo-muted);
    --text-main: var(--jojo-text);
    --text-muted: var(--jojo-text-muted);
}

.jojo-wrap{padding:0 0 2.5rem;}

.jojo-panel{background:var(--jojo-surface);border-radius:var(--jojo-radius);box-shadow:var(--jojo-shadow);border:1px solid var(--jojo-border);overflow:hidden;}

.jojo-options{padding:clamp(1.25rem, 4vw, 1.75rem);}

.jojo-options .jojo-hint{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem;background:var(--jojo-accent-light);color:var(--jojo-accent);border-radius:var(--jojo-radius-sm);font-size:0.9375rem;line-height:1.5;margin-bottom:1.5rem;border-left:4px solid var(--jojo-accent);}

.jojo-field{margin-bottom:1.25rem;}

.jojo-field:last-of-type{margin-bottom:0;}

.jojo-label{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;font-weight:600;color:var(--jojo-text);font-size:0.9375rem;margin-bottom:0.5rem;}

.jojo-select{width:100%;padding:0.875rem 1rem;border:2px solid var(--jojo-border);border-radius:var(--jojo-radius-sm);font-size:1rem;color:var(--jojo-text);background:var(--jojo-surface);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.75rem;cursor:pointer;transition:border-color 0.2s ease, box-shadow 0.2s ease;}

.jojo-select:focus{outline:none;border-color:var(--jojo-accent);box-shadow:0 0 0 3px rgba(194, 65, 12, 0.15);}

.jojo-select:hover{border-color:var(--jojo-accent);}

.jojo-check-wrap{display:flex;align-items:center;gap:0.75rem;padding:1rem;background:var(--jojo-muted);border-radius:var(--jojo-radius-sm);border:2px solid var(--jojo-border);cursor:pointer;transition:border-color 0.2s ease, background 0.2s ease;}

.jojo-check-wrap:hover{border-color:var(--jojo-accent);background:var(--jojo-accent-light);}

.jojo-check-wrap input[type="checkbox"]{width:1.25rem;height:1.25rem;accent-color:var(--jojo-accent);cursor:pointer;}

.jojo-check-wrap label{cursor:pointer;font-weight:600;color:var(--jojo-text);margin:0;font-size:0.9375rem;}

.jojo-actions{display:flex;flex-wrap:wrap;gap:0.75rem;padding:1.5rem clamp(1.25rem, 4vw, 1.75rem);background:var(--jojo-muted);border-top:1px solid var(--jojo-border);}

.jojo-btn-gen{flex:1 1 100%;min-height:52px;background:var(--jojo-accent);color:#fff;border:none;border-radius:var(--jojo-radius-sm);font-size:1.0625rem;font-weight:700;cursor:pointer;transition:background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;box-shadow:0 4px 14px rgba(194, 65, 12, 0.35);}

.jojo-btn-gen:hover{background:var(--jojo-accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(194, 65, 12, 0.4);}

.jojo-btn-gen:active{transform:translateY(0);}

.jojo-btn-gen:focus{outline:2px solid var(--jojo-accent);outline-offset:3px;}

.jojo-btn-gen.loading,.jojo-btn-gen:disabled{cursor:wait;opacity:0.9;pointer-events:none;}

.jojo-btn-ghost{flex:1 1 auto;min-height:48px;padding:0 1.25rem;background:transparent;border:2px solid var(--jojo-border);color:var(--jojo-text-muted);border-radius:var(--jojo-radius-sm);font-size:0.9375rem;font-weight:600;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;}

.jojo-btn-ghost:hover{border-color:var(--jojo-accent);color:var(--jojo-accent);}

.jojo-result-wrap{margin-top:1.5rem;display:none;}

.jojo-result-wrap.is-visible{display:block;animation:jojoFadeIn 0.35s ease;}

@keyframes jojoFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.jojo-result-inner{background:var(--jojo-surface);border-radius:var(--jojo-radius);box-shadow:var(--jojo-shadow);border:2px solid var(--jojo-accent);padding:clamp(1.25rem, 4vw, 1.75rem);}

.jojo-card-name{font-size:clamp(1.5rem, 4vw, 2rem);font-weight:800;color:var(--jojo-accent);margin:0 0 0.75rem;line-height:1.2;letter-spacing:-0.02em;}

.jojo-card-meta{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.25rem;}

.jojo-badge{display:inline-block;padding:0.4rem 0.85rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;background:var(--jojo-accent-light);color:var(--jojo-accent);text-transform:capitalize;}

.jojo-ability{padding:1rem;background:var(--jojo-muted);border-radius:var(--jojo-radius-sm);border-left:4px solid var(--jojo-accent);font-size:1rem;color:var(--jojo-text);line-height:1.6;margin:0 0 1.25rem;}

.jojo-stats{display:grid;grid-template-columns:repeat(2, 1fr);gap:0.75rem;}

.jojo-stat{background:var(--jojo-muted);padding:0.875rem;border-radius:var(--jojo-radius-sm);text-align:center;border:1px solid var(--jojo-border);}

.jojo-stat-label{font-size:0.75rem;font-weight:600;color:var(--jojo-text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.25rem;}

.jojo-stat-value{font-size:1.25rem;font-weight:700;color:var(--jojo-text);}

.jojo-stat-value.A{color:#059669;}

.jojo-stat-value.B{color:#2563eb;}

.jojo-stat-value.C{color:#d97706;}

.jojo-stat-value.D{color:#dc2626;}

.jojo-stat-value.E{color:var(--jojo-text-muted);}

.jojo-result-actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--jojo-border);}

.jojo-btn-copy,.jojo-btn-link{flex:1 1 140px;min-height:44px;padding:0 1rem;background:var(--jojo-muted);border:1px solid var(--jojo-border);color:var(--jojo-text);border-radius:var(--jojo-radius-sm);font-size:0.875rem;font-weight:600;cursor:pointer;transition:background 0.2s ease, border-color 0.2s ease;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;}

.jojo-btn-copy:hover,.jojo-btn-link:hover{background:var(--jojo-border);border-color:#cbd5e1;}

.jojo-btn-copy.copied,.jojo-btn-link.copied{background:#059669;border-color:#059669;color:#fff;}

.jojo-share{ margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--jojo-border);}

.jojo-share-title{font-size:0.9375rem;font-weight:600;color:var(--jojo-text);margin:0 0 0.75rem;}

.jojo-share-btns{display:flex;flex-wrap:wrap;gap:0.5rem;}

.jojo-share-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.6rem 1rem;border-radius:var(--jojo-radius-sm);font-size:0.8125rem;font-weight:600;text-decoration:none;color:#fff;transition:transform 0.15s ease, opacity 0.2s ease;}

.jojo-share-btn:hover{transform:translateY(-1px);opacity:0.95;}

.jojo-share-twitter{background:#1da1f2;}

.jojo-share-facebook{background:#1877f2;}

.jojo-share-reddit{background:#ff4500;}

.jojo-share-telegram{background:#0088cc;}

.jojo-share-whatsapp{background:#25d366;}
.jojo-share-linkedin{background:#0077b5;}

.jojo-tip{position:relative;display:inline-flex;}

.jojo-tip-trigger{width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(15, 23, 42, 0.08);color:var(--jojo-text);font-weight:700;border:none;cursor:help;font-size:0.75rem;display:inline-flex;align-items:center;justify-content:center;}

.jojo-tip-text{visibility:hidden;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:220px;background:var(--jojo-text);color:#fff;font-size:0.8125rem;line-height:1.4;padding:0.75rem;border-radius:var(--jojo-radius-sm);z-index:10;opacity:0;transition:opacity 0.2s ease, visibility 0.2s ease;}

.jojo-tip:hover .jojo-tip-text,.jojo-tip:focus-within .jojo-tip-text{visibility:visible;opacity:1;}

.jojo-loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid rgba(255,255,255,0.5);border-top-color:#fff;border-radius:50%;animation:jojoSpin 0.8s linear infinite;}

@keyframes jojoSpin{to{transform:rotate(360deg);}}

.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;}

@media (min-width: 768px){.jojo-btn-gen{flex:1 1 auto;min-width:200px;}.jojo-actions{flex-direction:row;align-items:center;}.jojo-stats{grid-template-columns:repeat(3, 1fr);}}

@media (min-width: 992px){.jojo-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:1.5rem;align-items:start;}.jojo-result-wrap{margin-top:0;}.jojo-stats{grid-template-columns:repeat(6, 1fr);}}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.05ms !important;}.jojo-result-wrap.is-visible{animation:none;}}