/* ChatBase — custom mouse, nav bar editor (customize.js), connection check (netcheck.js) */

.cb-cz-note { margin: 0 0 11px; font-size: 12.5px; opacity: .7; }

/* ---- hidden nav buttons ---- */
.nav-btn.cb-nav-hidden { display: none !important; }

/* ---- cursor picker ---- */
.cb-cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cb-cur {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 12px 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: inherit; font: inherit; font-size: 12px; cursor: pointer;
}
.cb-cur.on { border-color: #c14bff; background: rgba(193, 75, 255, .16); font-weight: 700; }
.cb-cur-prev { width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.cb-cur-default { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 2l13 12h-6l3 7-2.6 1.2-3-7-4.4 3.6z" fill="%23fff" stroke="%23000" stroke-width="1.2"/></svg>'); }
.cb-cur-dot { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="5" fill="%23fff" stroke="%23000" stroke-width="1.5"/></svg>'); }
.cb-cur-glow { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><circle cx="14" cy="14" r="11" fill="rgba(193,75,255,.28)"/><circle cx="14" cy="14" r="5" fill="%23c14bff"/><circle cx="14" cy="14" r="2" fill="%23fff"/></svg>'); }
.cb-cur-neon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M3 2l17 8-7 2.5L10.5 20z" fill="%235b8cff" stroke="%23fff" stroke-width="1.6" stroke-linejoin="round"/></svg>'); }
.cb-cur-retro { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M3 1l14 13h-6l3 7-3 1.5-3-7-5 4z" fill="%23fff" stroke="%23000" stroke-width="1.4" stroke-linejoin="round"/></svg>'); }
.cb-cur-cross { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><g stroke="%235fd38d" stroke-width="2" stroke-linecap="round"><path d="M13 2v7M13 17v7M2 13h7M17 13h7"/></g><circle cx="13" cy="13" r="2" fill="%235fd38d"/></svg>'); }
.cb-cur-heart { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 21s-8-5.2-8-10.3A4.7 4.7 0 0 1 12 7a4.7 4.7 0 0 1 8 3.7C20 15.8 12 21 12 21z" fill="%23ff73fa" stroke="%23fff" stroke-width="1.3"/></svg>'); }

.cb-cz-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }

/* sparkle trail */
.cb-trail-dot {
    position: fixed;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #c14bff 60%, transparent);
    pointer-events: none;
    z-index: 99999;
    animation: cbTrail .6s ease-out forwards;
}
@keyframes cbTrail { to { opacity: 0; transform: scale(.3) translateY(6px); } }

/* ---- nav editor ---- */
.cb-nav-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; max-height: 340px; overflow: auto; }
.cb-nav-sec { font-size: 10.5px; letter-spacing: .08em; opacity: .5; font-weight: 800; margin: 9px 0 3px; }
.cb-nav-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.cb-nav-row.off { opacity: .42; }
.cb-nav-ic { width: 20px; text-align: center; }
.cb-nav-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-nav-name small { opacity: .55; font-size: 11px; }
.cb-nav-b {
    border: 0; border-radius: 7px; background: rgba(255, 255, 255, .09);
    color: inherit; width: 26px; height: 24px; font-size: 11px; cursor: pointer;
}
.cb-nav-b[disabled] { opacity: .25; cursor: default; }
.cb-nav-eye { width: 30px; font-size: 13px; }
.cb-nav-reset, .nc-open {
    padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
    background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}

/* ---- connection check ---- */
.nc-modal { display: grid; place-items: center; }
.nc-box {
    position: relative; width: min(560px, 94vw); max-height: 88vh; overflow: auto;
    padding: 22px; border-radius: 20px; background: #141829;
    border: 1px solid rgba(255, 255, 255, .12); color: #e8ebff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.nc-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #e8ebff; cursor: pointer; }
.nc-box h2 { margin: 0 0 4px; font-size: 20px; }
.nc-sub { margin: 0 0 14px; font-size: 13px; opacity: .7; }
.nc-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); margin-bottom: 5px; }
.nc-row.ok { background: rgba(95, 211, 141, .12); }
.nc-row.bad { background: rgba(255, 95, 109, .14); }
.nc-dot { font-size: 14px; }
.nc-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.nc-name small { font-weight: 400; opacity: .62; font-size: 11.5px; }
.nc-res { font-size: 11.5px; opacity: .75; white-space: nowrap; }
.nc-verdict { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(91, 140, 255, .12); border: 1px solid rgba(91, 140, 255, .3); }
.nc-verdict h3 { margin: 0 0 6px; font-size: 15px; }
.nc-verdict p { margin: 0; font-size: 13px; opacity: .85; line-height: 1.5; }

@media (max-width: 560px) { .nc-res { display: none; } .nc-box { padding: 18px 14px; } }