/* Local aliases: --grad/--bg-2/--card-hover are used throughout this file but
   were never defined in /assets/base.css (only --accent-grad/--bg-soft/
   --card-2 exist there) — every var() using them was silently falling back
   to nothing (Compare button, buttons and hover states lost their
   background). Defining the aliases here, scoped to this page's own
   stylesheet, restores them without touching the shared base.css. */
:root{--grad:var(--accent-grad);--bg-2:var(--bg-soft);--card-hover:var(--card-2)}
.jd-container{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

.jd-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jd-panel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.jd-panel-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg);font-size:.82rem;font-weight:600;color:var(--muted-2)}
.jd-panel-head span{flex:1}
.jd-btn-sm{font-size:.76rem;padding:3px 9px;border-radius:5px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);cursor:pointer;font-family:inherit;transition:background .12s}
.jd-btn-sm:hover{background:var(--card-hover)}
.jd-textarea{width:100%;min-height:200px;padding:12px;font-family:"Fira Mono","JetBrains Mono",monospace;font-size:.82rem;background:var(--card);color:var(--text);border:none;resize:vertical;outline:none;line-height:1.6}
.jd-textarea::placeholder{color:var(--muted-2)}
.jd-err{padding:6px 12px;background:#7f1d1d;color:#fca5a5;font-size:.8rem;border-top:1px solid #991b1b}

.jd-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jd-compare-btn{padding:9px 24px;border-radius:8px;background:var(--grad);color:#0b0e1c;border:none;font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:opacity .15s}
.jd-compare-btn:hover{opacity:.88}
.jd-opt{display:flex;align-items:center;gap:6px;font-size:.86rem;color:var(--muted-2);cursor:pointer;user-select:none}
.jd-opt input{accent-color:var(--accent)}
.jd-legend{display:flex;gap:12px;margin-left:auto}
.jd-leg{font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:5px}
.jd-leg.added{background:rgba(34,197,94,.15);color:#22c55e}
.jd-leg.removed{background:rgba(239,68,68,.15);color:#ef4444}
.jd-leg.changed{background:rgba(234,179,8,.15);color:#eab308}
.jd-summary{font-size:.85rem;color:var(--muted-2)}

.jd-output{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jd-out-panel{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.jd-out-head{padding:8px 14px;background:var(--bg);border-bottom:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.jd-pre{margin:0;padding:12px;font-family:"Fira Mono","JetBrains Mono",monospace;font-size:.8rem;line-height:1.7;overflow-x:auto;background:var(--card);color:var(--text);white-space:pre}

/* Diff highlighting */
.jd-line{display:block}
.jd-line.added{background:rgba(34,197,94,.12);color:#4ade80}
.jd-line.removed{background:rgba(239,68,68,.12);color:#f87171}
.jd-line.changed{background:rgba(234,179,8,.1);color:#fbbf24}
.jd-line.neutral{color:var(--muted-2)}
/* inline value highlight */
.jd-val-old{background:rgba(239,68,68,.25);border-radius:2px;padding:0 2px}
.jd-val-new{background:rgba(34,197,94,.25);border-radius:2px;padding:0 2px}

.jd-nodiff{text-align:center;padding:24px;background:var(--card);border:1px solid #22c55e44;border-radius:10px;color:#22c55e;font-size:.95rem;font-weight:600}

@media(max-width:700px){
  .jd-inputs,.jd-output{grid-template-columns:1fr}
  .jd-legend{margin-left:0;width:100%}
}