/* Shared by the main site and the bot dashboard: custom cursor, card spotlight, appearance settings. */

/* ---- custom cursor ---- */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0;will-change:transform}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--acc)}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--acc) 75%,transparent);transition:width .2s,height .2s,margin .2s,background .2s,border-color .2s,opacity .2s}
html.cur.cur-on .cur-dot,html.cur.cur-on .cur-ring{opacity:1}
html.cur .cur-dot.txt,html.cur .cur-ring.txt{opacity:0}
.cur-ring.hov{width:56px;height:56px;margin:-28px 0 0 -28px;background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:var(--acc)}
.cur-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px;background:color-mix(in srgb,var(--acc) 30%,transparent)}
html.cur,html.cur *{cursor:none!important}
html.cur input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=submit]):not([type=button]),html.cur textarea{cursor:text!important}
html.cur select,html.cur input[type=file]{cursor:default!important}

/* ---- card spotlight (follows the mouse) ---- */
.card,.tile{position:relative;isolation:isolate}
.card::before,.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 15%,transparent),transparent 70%)}
html.spot .card:hover::before,html.spot .tile:hover::before{opacity:1}
html.spot .card:hover,html.spot .tile:hover{border-color:color-mix(in srgb,var(--acc) 38%,var(--line))}

/* ---- appearance settings ---- */
.ui-set{position:relative}
.ui-gear{width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.ui-gear:hover,.ui-gear[aria-expanded=true]{color:var(--txt,#fff);background:rgba(255,255,255,.08);border-color:var(--line2,#3a3e66)}
.ui-panel{position:absolute;right:0;top:calc(100% + 14px);width:min(300px,86vw);background:#0d0d16;border:1px solid var(--line2,#3a3e66);border-radius:22px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.65);z-index:40;text-align:left;animation:uiPop .16s ease-out}
.ui-panel[hidden]{display:none}
@keyframes uiPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.ui-h{display:block;font:600 15px var(--head);margin-bottom:14px;color:var(--txt,#fff)}
.ui-l{font:500 12.5px var(--body);color:var(--mut,#9a98b3);margin-bottom:8px}
.ui-sw{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ui-sw button{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .12s}
.ui-sw button:hover{transform:scale(1.12)}
.ui-sw button[aria-pressed=true]{border-color:#0d0d16;box-shadow:0 0 0 2px var(--c)}
.ui-tg{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 0;background:none;border:0;border-top:1px solid var(--line);color:var(--txt,#fff);font:500 14px var(--body);cursor:pointer;text-align:left}
.ui-tg i{flex:none;position:relative;width:36px;height:20px;border-radius:99px;background:#26263a;transition:background .15s}
.ui-tg i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.ui-tg[aria-checked=true] i{background:var(--acc)}
.ui-tg[aria-checked=true] i::after{transform:translateX(16px)}
.ui-reset{margin-top:6px;padding:10px 0 0;width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--mut,#9a98b3);font:500 13px var(--body);text-align:left;cursor:pointer}
.ui-reset:hover{color:var(--txt,#fff)}

/* ---- animations off ---- */
html.noanim *,html.noanim *::before,html.noanim *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.noanim .eq i{height:60%}