/* TMNF nickname 2–4 point color gradients */
#arenaGradientPanel{margin-top:16px;padding:16px;border-radius:16px;border:1px solid rgba(105,174,245,.35);background:linear-gradient(140deg,rgba(12,26,48,.74),rgba(8,12,26,.77))}
#arenaGradientPanel .ag-header,#arenaGradientPanel .ag-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
#arenaGradientPanel .ag-title{font-size:17px;font-weight:800;color:#e8f6ff}
#arenaGradientPanel .ag-help{font-size:12px;color:#aec5e7;margin:5px 0 12px;line-height:1.5}
#arenaGradientPanel .ag-header label{display:flex;align-items:center;gap:8px;font-size:13px}
#arenaGradientPanel select{min-width:80px;flex:none}
#arenaGradientPanel .ag-stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:11px 0 14px}
#arenaGradientPanel .ag-stop{background:rgba(5,12,25,.64);border:1px solid rgba(122,163,225,.36);padding:10px;border-radius:11px;min-width:0}
#arenaGradientPanel .ag-stop.active{border-color:#87dff9;box-shadow:0 0 0 1px rgba(135,223,249,.26)}
#arenaGradientPanel .ag-stop-title{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:9px}
#arenaGradientPanel .ag-stop-title button{padding:5px 8px;border-radius:7px;font-size:12px;min-width:0}
#arenaGradientPanel .ag-stop-title small{font-size:11px;color:#b7c8e7}
#arenaGradientPanel .ag-stop-inputs{display:flex;gap:7px;align-items:center}
#arenaGradientPanel input[type="number"]{min-width:0;width:68px;flex:1;padding:8px}
#arenaGradientPanel input[type="color"]{width:46px;flex:none;height:36px;padding:3px;cursor:pointer}
#arenaGradientPanel .ag-letter-heading{color:#c4d6f4;font-size:12px;margin:0 0 7px}
#arenaGradientPanel .ag-letters{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
#arenaGradientPanel .ag-letter{min-width:31px;height:33px;padding:3px 7px;border-radius:8px;font-size:15px;font-weight:600;position:relative}
#arenaGradientPanel .ag-letter[data-points]:not([data-points=""]){border-color:#9ae8ff;box-shadow:inset 0 -3px 0 var(--ag-stop-color,#9ae8ff)}
#arenaGradientPanel .ag-letter small{position:absolute;top:-5px;right:-3px;font-size:9px;color:#e5f7ff;background:#1a355c;border-radius:5px;padding:0 2px}
#arenaGradientPanel .ag-preview{min-height:54px;padding:12px;border-radius:10px;border:1px solid rgba(126,177,224,.3);background:rgba(2,6,16,.48);display:flex;flex-wrap:wrap;align-items:center;overflow-wrap:anywhere;white-space:pre-wrap;font-size:23px}
#arenaGradientPanel .ag-error{color:#ff899b;font-weight:700}
#arenaGradientPanel .ag-actions{margin-top:12px;justify-content:flex-start}
#arenaGradientPanel .ag-actions .ag-apply{background:linear-gradient(180deg,#255f83,#18354e);border-color:#78d6fa;font-weight:800}
#arenaGradientPanel .ag-length{font-size:12px;color:#abc6df}
#arenaGradientPanel .ag-length.ag-error{color:#ff899b}
@media(max-width:850px){#arenaGradientPanel .ag-stops{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){#arenaGradientPanel .ag-stops{grid-template-columns:1fr}#arenaGradientPanel .ag-stop-inputs{justify-content:flex-start}}