:root{--bg:#0f1117;--panel:#15192c;--muted:#a9b1d6;--text:#e6e6e6;--accent:#7c5cff;--danger:#e53935;--border:#27304a}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
  .wrap{max-width:1280px;margin:0 auto;padding:18px;display:grid;gap:18px;grid-template-columns: 320px 1fr 1fr}
  .card{background:var(--panel);border-radius:14px;padding:14px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .title{margin:0 0 10px;font-weight:700;font-size:16px}
  .small{color:var(--muted);font-size:12px}
  .input,textarea{width:100%;background:#0c0f1a;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 12px;outline:none}
  textarea{min-height:220px;resize:vertical;font-family:ui-monospace,Consolas,Menlo,monospace}
.btn.copied {
  background: #4caf50 !important; /* green for success */
  transform: scale(1.05);
}

   
.btn {
background:var(--accent); color:#fff; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600; 
    
}
/* Make achievement links yellow in the preview (override Wowhead's q3 blue) */
#preview a.ach-yellow,
#preview a.ach-yellow:visited {
  color: #ffd100 !important; /* achievement yellow */
}

/* If Wowhead adds quality classes, still force yellow */
#preview a.ach-yellow.q0,
#preview a.ach-yellow.q1,
#preview a.ach-yellow.q2,
#preview a.ach-yellow.q3,
#preview a.ach-yellow.q4,
#preview a.ach-yellow.q5,
#preview a.ach-yellow.q6,
#preview a.ach-yellow.q7 {
  color: #ffd100 !important;
}


  .btn.sm{padding:6px 10px;font-size:12px}
  .btn.ghost{background:transparent;border:1px solid var(--border)}
  .btn.danger{background:var(--danger)}
  .list{max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:10px}
  .row{display:flex;gap:10px;align-items:center}
  .item{padding:10px 12px;border-bottom:1px solid #1d2239;cursor:pointer}
  .item:hover{background:#1b2036}
  .pill{font-size:11px;padding:2px 8px;border-radius:999px;background:#222742;color:#cbd5ff;margin-left:6px}
  pre{margin:0;white-space:pre-wrap;word-break:break-word}
  code{color:#b0ffca}
  .toolbar{display:flex;gap:8px;flex-wrap:wrap}
  .vrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:#0c0f1a}
  .vleft{display:flex; flex-direction:column}
  .vname{font-weight:600}
  .vmeta{font-size:12px; color:#cbd5ff}
  .preview{padding:10px 12px; background:#0c0f1a; border:1px solid var(--border); border-radius:10px; min-height:90px}
  @media (max-width:1200px){.wrap{grid-template-columns:1fr;}}