/* 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 (active tab, 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)}
.yx-container{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

.yx-tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap}
.yx-tab{flex:1;padding:10px 18px;font-size:.88rem;font-weight:600;background:none;border:none;color:var(--muted-2);cursor:pointer;transition:background .15s,color .15s;min-width:120px}
.yx-tab.active{background:var(--grad);color:#0b0e1c}
.yx-tab:hover:not(.active){color:var(--text);background:var(--card-hover)}

.yx-options{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.yx-opt-group{display:flex;align-items:center;gap:8px}
.yx-opt-label{font-size:.82rem;font-weight:700;color:var(--muted-2)}
.yx-select{padding:6px 10px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:.85rem;font-family:inherit;outline:none;cursor:pointer}
.yx-opt{display:flex;align-items:center;gap:6px;font-size:.86rem;color:var(--muted-2);cursor:pointer;user-select:none}
.yx-opt input{accent-color:var(--accent)}

.yx-io{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.yx-panel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.yx-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)}
.yx-panel-head span{flex:1}
.yx-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}
.yx-btn-sm:hover{background:var(--card-hover)}
.yx-btn-sm.yx-copy{background:var(--accent);color:#0b0e1c;border-color:transparent}
.yx-btn-sm.yx-copy:hover{opacity:.88}
.yx-btn-sm.copied{background:#22c55e;color:#fff;border-color:transparent}
.yx-area{width:100%;min-height:320px;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.65}
.yx-area::placeholder{color:var(--muted-2)}
.yx-area[readonly]{background:var(--bg)}
.yx-err{padding:6px 12px;background:#7f1d1d;color:#fca5a5;font-size:.8rem;font-family:monospace;border-top:1px solid #991b1b}

.yx-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-top:40px}
.yx-run-btn{padding:10px 18px;border-radius:9px;background:var(--grad);color:#0b0e1c;border:none;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.yx-run-btn:hover{opacity:.88}
.yx-stat{font-size:.78rem;color:var(--muted-2);text-align:center;line-height:1.5}

.yx-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.yx-badge{font-size:.83rem;font-weight:700;padding:4px 12px;border-radius:20px}
.yx-badge.valid{background:rgba(34,197,94,.15);color:#22c55e}
.yx-badge.invalid{background:rgba(239,68,68,.15);color:#ef4444}
.yx-info{font-size:.82rem;color:var(--muted-2)}

@media(max-width:700px){
  .yx-io{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}
  .yx-mid{flex-direction:row;padding-top:0}
  .yx-run-btn{flex:1}
}