/* ==========================================================================================
   Dep - admin panel theme
   ========================================================================================== */
:root {
	--bg: #05060d;
	--bg2: #0b0d1a;
	--card: rgba(17, 20, 38, .72);
	--card2: rgba(26, 30, 56, .7);
	--line: rgba(148, 163, 255, .12);
	--line2: rgba(148, 163, 255, .22);
	--txt: #e8ebff;
	--mut: #8d93b8;
	--cy: #22d3ee;
	--vi: #a855f7;
	--pk: #f43f5e;
	--gr: #22c55e;
	--ye: #f59e0b;
	--grad: linear-gradient(120deg, var(--cy), var(--vi) 50%, var(--pk));
	--r: 18px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--side: 260px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; min-height: 100vh; background: var(--bg); color: var(--txt);
	font: 15px/1.55 "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (hover: hover) and (pointer: fine) { body.fx, body.fx a, body.fx button, body.fx label, body.fx select { cursor: none; } body.fx input, body.fx textarea { cursor: text; } }
a { color: var(--cy); text-decoration: none; }
code, .mono { font-family: "Cascadia Code", Consolas, "JetBrains Mono", monospace; font-size: .9em; }
::selection { background: rgba(168, 85, 247, .45); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--cy), var(--vi)); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- background ---------- */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(70px); opacity: .55; }
.aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; animation: drift 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 65%); left: -12vmax; top: -14vmax; }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(168, 85, 247, .38), transparent 65%); right: -14vmax; top: 18vh; animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { background: radial-gradient(circle, rgba(244, 63, 94, .25), transparent 65%); left: 30vw; bottom: -22vmax; animation-duration: 38s; animation-delay: -15s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.15); } 100% { transform: translate(-6vw, 10vh) scale(.92); } }

/* ---------- cursor ---------- */
#cursor, #cursor-dot { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; transition: opacity .3s; }
body.fx #cursor, body.fx #cursor-dot { opacity: 1; }
#cursor { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(34, 211, 238, .7); box-shadow: 0 0 18px rgba(34, 211, 238, .45), inset 0 0 12px rgba(168, 85, 247, .35); transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s, background .25s, opacity .3s; }
#cursor.hot { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: rgba(244, 63, 94, .8); background: rgba(168, 85, 247, .08); }
#cursor.down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px var(--cy); }
.spark { position: fixed; z-index: 9998; pointer-events: none; width: 6px; height: 6px; border-radius: 50%; }
@media (hover: none), (pointer: coarse) { #cursor, #cursor-dot { display: none; } }

/* ---------- layout ---------- */
.side {
	position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: var(--side); padding: 22px 16px; display: flex; flex-direction: column; gap: 18px;
	background: linear-gradient(180deg, rgba(12, 14, 30, .92), rgba(8, 9, 20, .92)); border-right: 1px solid var(--line); backdrop-filter: blur(14px);
	transition: transform .45s var(--ease);
}
.side::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--cy), var(--vi), transparent); opacity: .7; animation: scan 6s linear infinite; background-size: 100% 300%; }
@keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 300%; } }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; color: var(--txt); }
.logo { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 0 12px rgba(168, 85, 247, .6)); }
.logo svg, .auth-logo svg, .about-logo svg { width: 100%; height: 100%; display: block; }
.logo-hex { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 2.2s var(--ease) forwards, hexspin 18s linear 2.2s infinite; transform-origin: 32px 32px; }
.logo-d { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.6s .5s var(--ease) forwards; }
.logo-dot { animation: beat 1.6s ease-in-out infinite; transform-origin: 32px 32px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes hexspin { to { transform: rotate(360deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .6; } }
.brand-t b { display: block; font-size: 24px; letter-spacing: .5px; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 5s linear infinite; }
.brand-t small { color: var(--mut); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
@keyframes flow { to { background-position: 200% 0; } }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.nav {
	position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--mut); font-weight: 600; overflow: hidden;
	opacity: 0; transform: translateX(-16px); animation: slidein .6s var(--ease) forwards; animation-delay: var(--d, 0ms); transition: color .25s, background .25s;
}
.nav .i { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.nav:hover { color: var(--txt); background: rgba(148, 163, 255, .07); }
.nav:hover .i { transform: scale(1.18) rotate(-8deg); color: var(--cy); }
.nav.on { color: #fff; background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(168, 85, 247, .12) 60%, transparent); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .18); }
.nav.on::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 12px var(--cy); }
.nav.on .i { color: var(--cy); filter: drop-shadow(0 0 6px var(--cy)); }
.nav em { margin-left: auto; font-style: normal; font-size: 12px; min-width: 24px; text-align: center; padding: 1px 7px; border-radius: 20px; background: rgba(168, 85, 247, .2); color: #e9d5ff; }
@keyframes slidein { to { opacity: 1; transform: none; } }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(148, 163, 255, .06); border: 1px solid var(--line); }
.me .i { width: 18px; height: 18px; color: var(--vi); }
.me span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.me form { margin: 0; }
.ver { text-align: center; color: var(--mut); font-size: 12px; letter-spacing: 1px; }
.lang { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(148, 163, 255, .06); border: 1px solid var(--line); }
.lang > .i { width: 18px; height: 18px; margin: 0 4px 0 6px; color: var(--mut); }
.lang a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 9px; color: var(--mut); font-weight: 700; font-size: 13px; transition: .25s; }
.lang a:hover { color: var(--txt); background: rgba(148, 163, 255, .08); }
.lang a.on { color: #fff; background: linear-gradient(120deg, rgba(34, 211, 238, .25), rgba(168, 85, 247, .25)); box-shadow: 0 0 14px rgba(34, 211, 238, .2); }
.lang .flag { width: 18px; height: 13px; }

.main { position: relative; z-index: 1; margin-left: var(--side); min-height: 100vh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 18px 34px; background: linear-gradient(180deg, rgba(5, 6, 13, .92), rgba(5, 6, 13, .55)); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .3px; animation: rise .7s var(--ease) both; }
.top .menu { display: none; }
.content { padding: 28px 34px 10px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.foot { padding: 20px 34px 28px; color: var(--mut); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.foot .i { width: 16px; height: 16px; color: var(--pk); animation: beat 1.4s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- icons ---------- */
.i { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.i.flip { transform: scaleX(-1); }
.ico { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; color: #fff; background: linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(168, 85, 247, .22)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -10px rgba(168, 85, 247, .7); position: relative; }
.ico .i { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .7)); }
.ico.sm { width: 38px; height: 38px; border-radius: 12px; }
.ico.sm .i { width: 18px; height: 18px; }
.ico::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1px solid rgba(34, 211, 238, .35); opacity: 0; transform: scale(.85); transition: .4s var(--ease); }
.card:hover .ico::after, .type:hover .ico::after { opacity: 1; transform: scale(1); }
.t-platform_groups .ico { background: linear-gradient(135deg, rgba(34, 211, 238, .3), rgba(59, 130, 246, .25)); }
.t-country_groups .ico { background: linear-gradient(135deg, rgba(34, 197, 94, .3), rgba(34, 211, 238, .2)); }
.t-channel_move .ico { background: linear-gradient(135deg, rgba(245, 158, 11, .3), rgba(244, 63, 94, .22)); }
.t-temp_rooms .ico { background: linear-gradient(135deg, rgba(168, 85, 247, .35), rgba(244, 63, 94, .22)); }
.t-welcome .ico { background: linear-gradient(135deg, rgba(244, 63, 94, .3), rgba(168, 85, 247, .25)); }
.spin-h { transition: transform .6s var(--ease); }
.btn:hover .spin-h { transform: rotate(180deg); }

/* ---------- cards ---------- */
.card {
	position: relative; padding: 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(14px);
	box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .8); animation: rise .7s var(--ease) both; animation-delay: var(--d, 0ms); isolation: isolate;
	transition: border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.card::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
	background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, var(--cy) 72%, var(--vi) 82%, var(--pk) 90%, transparent 96%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .5s; animation: spinb 5s linear infinite;
}
.card:hover::before, .card.glow::before { opacity: 1; }
.card:hover { border-color: var(--line2); box-shadow: 0 24px 60px -25px rgba(168, 85, 247, .45); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, -20%), rgba(34, 211, 238, .09), transparent 45%); opacity: 0; transition: opacity .4s; }
.card:hover::after { opacity: 1; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spinb { to { --ang: 360deg; } }
.card-h { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.card-h > div { flex: 1; min-width: 0; }
.card-h h2 { margin: 0; font-size: 17px; font-weight: 800; }
.card-h p { margin: 2px 0 0; color: var(--mut); font-size: 13px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid2.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lead { margin: 0; color: var(--mut); display: flex; gap: 10px; align-items: center; animation: rise .6s var(--ease) both; }
.lead .i { color: var(--vi); }

/* ---------- hero (dashboard) ---------- */
.hero { display: flex; align-items: center; gap: 28px; padding: 28px 30px; overflow: hidden; }
.hero-orb { position: relative; width: 120px; height: 120px; flex: none; display: grid; place-items: center; --c: var(--mut); }
.hero-orb.st-on { --c: var(--gr); }
.hero-orb.st-wait { --c: var(--ye); }
.hero-orb.st-off { --c: var(--pk); }
.hero-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.hero-orb.st-on .ring, .hero-orb.st-wait .ring { animation: ripple 3s var(--ease) infinite; }
.hero-orb .r2 { animation-delay: 1s !important; }
.hero-orb .r3 { animation-delay: 2s !important; }
.hero-orb.st-off .ring.r1 { opacity: .35; inset: 10px; border-style: dashed; animation: hexspin 14s linear infinite; }
@keyframes ripple { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.hero-orb .core { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .25), transparent 55%), color-mix(in srgb, var(--c) 30%, #0b0d1a); box-shadow: 0 0 40px -4px var(--c), inset 0 0 18px rgba(255, 255, 255, .1); transition: .6s; }
.hero-orb .core .i { width: 34px; height: 34px; color: #fff; filter: drop-shadow(0 0 8px var(--c)); }
.hero-orb.st-on .core { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero-txt { flex: 1; min-width: 0; }
.hero-txt small { color: var(--mut); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; }
.hero-txt h2 { margin: 2px 0 6px; font-size: 30px; font-weight: 900; }
.err-line { margin: 0 0 8px; color: #fda4af; font-size: 13px; min-height: 0; }
.err-line:empty { display: none; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--mut); font-size: 13px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .i { width: 15px; height: 15px; color: var(--cy); }
.hero-meta b { color: var(--txt); }
.hero-btns form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat { display: flex; align-items: center; gap: 16px; padding: 20px; }
.stat small { display: block; color: var(--mut); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.stat strong { display: block; font-size: 22px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat strong small { display: inline; font-size: 15px; text-transform: none; letter-spacing: 0; }
.stat > div { min-width: 0; }
.stat.c2 .ico { background: linear-gradient(135deg, rgba(34, 197, 94, .3), rgba(34, 211, 238, .2)); }
.stat.c3 .ico { background: linear-gradient(135deg, rgba(168, 85, 247, .35), rgba(244, 63, 94, .2)); }
.stat.c4 .ico { background: linear-gradient(135deg, rgba(245, 158, 11, .3), rgba(244, 63, 94, .2)); }
.stat .ico .i { animation: bob 3.2s ease-in-out infinite; }
.stat.c2 .ico .i { animation-delay: -.8s; } .stat.c3 .ico .i { animation-delay: -1.6s; } .stat.c4 .ico .i { animation: spin 6s linear infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- activity / log ---------- */
.act-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.act { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--txt); border: 1px solid transparent; transition: .25s; }
.act:hover { background: rgba(148, 163, 255, .06); border-color: var(--line); transform: translateX(4px); }
.act > div { flex: 1; min-width: 0; }
.act b { display: block; font-size: 14px; }
.act span { display: block; color: var(--mut); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act time { color: var(--mut); font-size: 12px; white-space: nowrap; }
.act.dim { opacity: .45; }
.txt-err, .act span.txt-err { color: #fda4af !important; }
.flash-new { animation: flashnew 1.4s var(--ease); }
@keyframes flashnew { 0% { background: rgba(34, 211, 238, .25); } 100% { background: transparent; } }
.log { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px; padding: 10px; overflow: auto; }
.log.mini { max-height: 420px; }
.log.big { max-height: calc(100vh - 260px); min-height: 300px; }
.log-row { display: flex; gap: 10px; padding: 3px 6px; border-radius: 6px; animation: rise .4s var(--ease) both; }
.log-row:hover { background: rgba(148, 163, 255, .07); }
.log-row time { color: #6b7199; white-space: nowrap; }
.log-row b { width: 66px; flex: none; font-weight: 700; color: var(--cy); }
.log-row span { word-break: break-word; }
.lv-error b, .lv-critical b { color: var(--pk); }
.lv-error span, .lv-critical span { color: #fecdd3; }
.lv-warn b { color: var(--ye); }
.log-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.log-tools form { margin: 0; }

/* ---------- buttons ---------- */
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; overflow: hidden;
	font: inherit; font-weight: 700; color: var(--txt); background: var(--card2); border: 1px solid var(--line2); transition: transform .2s var(--ease), box-shadow .3s, border-color .3s, background .3s;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, .45); box-shadow: 0 10px 26px -12px rgba(34, 211, 238, .6); }
.btn:active { transform: translateY(0) scale(.97); }
.btn .i { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn:hover .i { transform: scale(1.15); }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.btn:hover::after { left: 130%; }
.btn.primary { border: 0; color: #fff; background: linear-gradient(120deg, #0891b2, #7c3aed 55%, #db2777); background-size: 200% 100%; box-shadow: 0 10px 30px -12px rgba(124, 58, 237, .9); animation: flow 6s linear infinite; }
.btn.ok { border-color: rgba(34, 197, 94, .45); background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(34, 211, 238, .12)); }
.btn.ok:hover { box-shadow: 0 10px 26px -12px rgba(34, 197, 94, .8); border-color: var(--gr); }
.btn.danger { border-color: rgba(244, 63, 94, .4); background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(168, 85, 247, .1)); }
.btn.danger:hover { box-shadow: 0 10px 26px -12px rgba(244, 63, 94, .8); border-color: var(--pk); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.big { padding: 14px 24px; font-size: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(148, 163, 255, .06); color: var(--txt); transition: .25s; padding: 0; }
.icon-btn:hover { border-color: var(--cy); color: var(--cy); transform: rotate(-6deg) scale(1.06); }
.icon-btn.danger:hover { border-color: var(--pk); color: var(--pk); }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .35); animation: rip .7s ease-out forwards; pointer-events: none; }
@keyframes rip { to { transform: scale(4); opacity: 0; } }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.row2, .row3 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lbl { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #c7cbef; }
.lbl .i { width: 16px; height: 16px; color: var(--cy); }
.hint { margin: 0; color: var(--mut); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.hint .i { width: 14px; height: 14px; color: var(--ye); }
.in, .sel select {
	width: 100%; font: inherit; color: var(--txt); background: rgba(5, 6, 13, .6); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 14px; outline: none;
	transition: border-color .25s, box-shadow .25s, background .25s;
}
.in:focus, .sel select:focus { border-color: var(--cy); box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), 0 0 22px -6px rgba(34, 211, 238, .6); background: rgba(5, 6, 13, .85); }
.in.small { padding: 7px 12px; font-size: 13px; width: 200px; }
textarea.in { resize: vertical; min-height: 140px; line-height: 1.5; }
.sel { position: relative; min-width: 0; }
.sel > .i:first-child { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--vi); pointer-events: none; }
.sel select { appearance: none; -webkit-appearance: none; padding-left: 38px; padding-right: 36px; text-overflow: ellipsis; }
.sel select option { background: #0f1124; color: var(--txt); }
.sel .caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--mut); pointer-events: none; transition: transform .3s; }
.sel:focus-within .caret { transform: translateY(-50%) rotate(180deg); color: var(--cy); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 10px; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 104px; height: 34px; border-radius: 34px; background: rgba(244, 63, 94, .16); border: 1px solid rgba(244, 63, 94, .45); transition: .4s var(--ease); flex: none; overflow: hidden; }
.switch .knob { position: absolute; z-index: 2; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fda4af); box-shadow: 0 0 12px rgba(244, 63, 94, .8); transition: .45s cubic-bezier(.6, -0.3, .3, 1.4); }
.switch b { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11px; letter-spacing: 1px; transition: .35s var(--ease); }
.switch .on { left: 14px; color: #bbf7d0; opacity: 0; transform: translateX(-10px); }
.switch .off { right: 12px; color: #fecdd3; }
.switch input:checked + .track { background: rgba(34, 197, 94, .2); border-color: rgba(34, 197, 94, .6); box-shadow: 0 0 20px -4px rgba(34, 197, 94, .7); }
.switch input:checked + .track .knob { left: 73px; background: radial-gradient(circle at 35% 30%, #fff, #86efac); box-shadow: 0 0 14px rgba(34, 197, 94, .9); }
.switch input:checked + .track .on { opacity: 1; transform: none; }
.switch input:checked + .track .off { opacity: 0; transform: translateX(10px); }
.switch input:focus-visible + .track { outline: 2px solid var(--cy); outline-offset: 3px; }
.switch:active .knob { width: 32px; }
.switch-label { font-weight: 700; font-size: 13px; color: var(--mut); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 30px; border: 1px solid var(--line2); background: rgba(5, 6, 13, .5); font-size: 13px; font-weight: 600; color: var(--mut); transition: .25s var(--ease); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .i { width: 14px; height: 14px; display: none; }
.chip small { color: #6b7199; font-size: 11px; }
.chip:hover { border-color: var(--cy); color: var(--txt); transform: translateY(-1px); }
.chip.on { color: #fff; border-color: transparent; background: linear-gradient(120deg, rgba(34, 211, 238, .35), rgba(168, 85, 247, .35)); box-shadow: 0 0 16px -4px rgba(168, 85, 247, .8); }
.chip.on .i { display: block; animation: pop .35s var(--ease); }
.chip.on small { color: #e9d5ff; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* rules */
.rules { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rule { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(5, 6, 13, .4); border: 1px solid var(--line); animation: rise .45s var(--ease) both; transition: .25s; }
.rule:hover { border-color: var(--line2); }
.rule > .sel, .rule > .in { flex: 1; }
.rule .arrow { color: var(--cy); display: grid; place-items: center; }
.rule .arrow .i { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
.rule .grip { color: #4b5078; }
.rule.out { animation: out .35s var(--ease) forwards; }
@keyframes out { to { opacity: 0; transform: translateX(30px) scale(.96); } }
.flag-box { width: 36px; display: grid; place-items: center; }
.flag { width: 26px; height: 19px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 10px -4px rgba(0, 0, 0, .8); display: inline-block; }
.flag.none { background: rgba(148, 163, 255, .15); }
.flag-box .flag { animation: pop .4s var(--ease); }

/* OS grid */
.os-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.os { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border-radius: 16px; background: rgba(5, 6, 13, .4); border: 1px solid var(--line); animation: rise .5s var(--ease) both; animation-delay: var(--d); transition: .3s var(--ease); }
.os:hover { border-color: rgba(34, 211, 238, .4); transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(34, 211, 238, .6); }
.os-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(168, 85, 247, .2)); }
.os-ico .i { width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 0 8px var(--cy)); transition: transform .5s var(--ease); }
.os:hover .os-ico .i { transform: rotateY(360deg); }
.os .sel { width: 100%; }

/* message editor */
.msg-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; }
.code { font: 600 12px "Cascadia Code", Consolas, monospace; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(34, 211, 238, .3); background: rgba(34, 211, 238, .08); color: #a5f3fc; transition: .2s var(--ease); }
.code:hover { background: rgba(34, 211, 238, .2); transform: translateY(-2px); box-shadow: 0 6px 14px -8px var(--cy); }
.code.bb { border-color: rgba(168, 85, 247, .35); background: rgba(168, 85, 247, .1); color: #e9d5ff; }
.preview { display: flex; flex-direction: column; gap: 7px; }
.ts-chat { border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); background: #1b1d27; flex: 1; }
.ts-head { display: flex; gap: 8px; align-items: center; padding: 9px 14px; background: #262936; color: #9aa1c9; font-size: 13px; font-weight: 700; }
.ts-head .i { width: 15px; height: 15px; color: var(--cy); }
.ts-msg { padding: 14px; white-space: pre-wrap; word-break: break-word; font-family: Verdana, Tahoma, sans-serif; font-size: 13px; color: #d5d8ea; min-height: 120px; }
.ts-msg .nick { color: #5b8cff; font-weight: 700; }

/* node cards */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.node { display: flex; flex-direction: column; gap: 12px; }
.node.off { opacity: .6; filter: saturate(.4); }
.node.off:hover { opacity: .9; }
.node-top { display: flex; align-items: center; gap: 12px; }
.node-t { flex: 1; min-width: 0; }
.node-t h3 { margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-t small { color: var(--mut); }
.node-top form { margin: 0; }
.node-sum, .node-st, .node-warn { margin: 0; font-size: 13px; color: var(--mut); display: flex; gap: 8px; align-items: center; }
.node-st span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-st time { font-size: 12px; color: #6b7199; white-space: nowrap; }
.node-sum .i, .node-st .i { width: 15px; height: 15px; color: var(--cy); flex: none; }
.node-warn { color: #fcd34d; }
.node-warn .i { width: 15px; height: 15px; animation: beat 1.4s infinite; }
.node-btns { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.node-btns form { margin: 0; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.type {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 18px; border-radius: 16px; font: inherit; color: var(--txt);
	background: rgba(5, 6, 13, .45); border: 1px dashed var(--line2); transition: .3s var(--ease); animation: rise .5s var(--ease) both; animation-delay: var(--d); overflow: hidden;
}
.type b { font-size: 15px; }
.type small { color: var(--mut); font-size: 12.5px; line-height: 1.45; }
.type em { position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 211, 238, .12); color: var(--cy); transition: .4s var(--ease); }
.type:hover { border-style: solid; border-color: rgba(34, 211, 238, .5); transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(168, 85, 247, .8); }
.type:hover em { transform: rotate(90deg) scale(1.15); background: var(--cy); color: #001018; }
.back { display: inline-flex; gap: 8px; align-items: center; color: var(--mut); font-weight: 600; width: max-content; transition: .25s; }
.back:hover { color: var(--cy); transform: translateX(-4px); }
.node-form { gap: 22px; }
.sticky-save { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: rgba(11, 13, 26, .85); border: 1px solid var(--line2); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -20px #000; animation: rise .6s .2s var(--ease) both; }

/* connection probe */
.probe { text-align: center; padding: 6px 0 4px; }
.probe-ico { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; animation: pop .6s var(--ease); }
.probe-ico .i { width: 34px; height: 34px; }
.probe.ok .probe-ico { background: rgba(34, 197, 94, .18); color: #86efac; box-shadow: 0 0 0 8px rgba(34, 197, 94, .07), 0 0 40px -6px var(--gr); }
.probe.bad .probe-ico { background: rgba(244, 63, 94, .18); color: #fda4af; box-shadow: 0 0 0 8px rgba(244, 63, 94, .07), 0 0 40px -6px var(--pk); animation: pop .6s var(--ease), shake .5s .6s; }
.probe h3 { margin: 0 0 12px; }
.probe .mono { color: #fecdd3; word-break: break-word; }
.kv { list-style: none; margin: 0; padding: 0; text-align: left; }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--line); animation: rise .4s var(--ease) both; }
.kv li:nth-child(2) { animation-delay: 60ms; } .kv li:nth-child(3) { animation-delay: 120ms; } .kv li:nth-child(4) { animation-delay: 180ms; } .kv li:nth-child(5) { animation-delay: 240ms; }
.kv span { color: var(--mut); display: flex; gap: 8px; align-items: center; }
.kv span .i { width: 15px; height: 15px; color: var(--cy); }
.kv b { text-align: right; word-break: break-word; }
.cache-line { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--mut); font-size: 13px; }
.cache-line span { flex: 1; }
.cache-line .i { color: var(--vi); }
.cache-line form { margin: 0; }

/* settings */
.copy-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line2); }
.copy-box code { flex: 1; overflow: auto; white-space: nowrap; color: #a5f3fc; }
.checks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 16px 0 0; }
.checks li { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.checks .ok { background: rgba(34, 197, 94, .14); color: #86efac; }
.checks .bad { background: rgba(244, 63, 94, .14); color: #fda4af; }

/* alerts, empty, toasts */
.alert { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 1px solid; animation: rise .5s var(--ease) both; color: var(--txt); }
.alert > span { flex: 1; }
.alert form { margin: 0; }
.alert code { background: rgba(0, 0, 0, .35); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.a-err { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .4); }
.a-err .i { color: var(--pk); }
.a-warn { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); }
.a-warn .i { color: var(--ye); }
.a-info { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .35); }
.a-info .i { color: var(--cy); }
a.alert:hover { border-color: var(--cy); transform: translateY(-2px); }
.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 10px; color: var(--mut); text-align: center; }
.empty > .i { width: 40px; height: 40px; color: var(--vi); animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 10px var(--vi)); }
.empty p { margin: 0; }
.empty.small { padding: 12px; }
.empty.big { grid-column: 1 / -1; padding: 40px; }
.toasts { position: fixed; z-index: 100; right: 22px; top: 22px; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 44px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(15, 17, 36, .95); border: 1px solid var(--line2); box-shadow: 0 20px 40px -16px #000; backdrop-filter: blur(10px); animation: toastin .6s var(--ease) both; position: relative; overflow: hidden; }
.toast span { flex: 1; font-size: 14px; }
.toast .tx { background: none; border: 0; color: var(--mut); padding: 2px; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: left; animation: life 6s linear forwards; }
.t-ok > .i { color: var(--gr); } .t-err > .i { color: var(--pk); } .t-info > .i { color: var(--cy); }
.t-err { border-color: rgba(244, 63, 94, .45); }
.toast.bye { animation: toastout .45s var(--ease) forwards; }
@keyframes toastin { from { opacity: 0; transform: translateX(60px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateX(60px); } }
@keyframes life { to { transform: scaleX(0); } }

/* top pill */
.pill { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 30px; font-size: 13px; font-weight: 700; border: 1px solid var(--line2); background: rgba(148, 163, 255, .06); }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mut); position: relative; }
.pill.st-on .dot { background: var(--gr); box-shadow: 0 0 10px var(--gr); }
.pill.st-wait .dot { background: var(--ye); box-shadow: 0 0 10px var(--ye); }
.pill.st-off .dot { background: var(--pk); box-shadow: 0 0 10px var(--pk); }
.pill .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3); opacity: 0; } }

/* about */
.about { text-align: center; padding: 40px 30px; max-width: 760px; margin: 0 auto; width: 100%; }
.about-logo { width: 120px; height: 120px; margin: 0 auto 10px; filter: drop-shadow(0 0 24px rgba(168, 85, 247, .7)); animation: float 4s ease-in-out infinite; }
.shine { margin: 0 0 14px; font-size: 44px; font-weight: 900; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 4s linear infinite; }
.about-txt { color: #c7cbef; max-width: 560px; margin: 0 auto 12px; }
.about-kv { max-width: 440px; margin: 22px auto 0; }

/* ---------- auth pages ---------- */
body.auth { display: grid; place-items: center; padding: 30px 16px; }
.auth-top { position: fixed; z-index: 5; top: 18px; right: 18px; }
.auth-box { position: relative; z-index: 1; width: min(420px, 100%); padding: 38px 32px 28px; border-radius: 26px; text-align: center; background: rgba(13, 15, 32, .72); border: 1px solid var(--line2); backdrop-filter: blur(20px); box-shadow: 0 40px 90px -30px rgba(124, 58, 237, .6); animation: rise .8s var(--ease) both; isolation: isolate; }
.auth-box::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1; background: conic-gradient(from var(--ang, 0deg), var(--cy), var(--vi), var(--pk), var(--cy)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinb 4s linear infinite; }
.auth-logo { width: 96px; height: 96px; margin: 0 auto 14px; filter: drop-shadow(0 0 22px rgba(168, 85, 247, .8)); animation: float 4s ease-in-out infinite; }
.auth-box h1 { margin: 0; font-size: 28px; font-weight: 900; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 5s linear infinite; }
.auth-sub { color: var(--mut); margin: 6px 0 22px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.auth-in { position: relative; display: block; }
.auth-in .i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mut); transition: .3s; }
.auth-in input { width: 100%; font: inherit; color: var(--txt); padding: 14px 14px 14px 46px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(5, 6, 13, .65); outline: none; transition: .3s; }
.auth-in input:focus { border-color: var(--cy); box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), 0 0 26px -6px var(--cy); }
.auth-in:focus-within .i { color: var(--cy); transform: translateY(-50%) scale(1.15); }
.auth-form .btn { margin-top: 8px; }
.auth-foot { margin: 20px 0 0; color: var(--mut); font-size: 12.5px; display: flex; gap: 6px; justify-content: center; align-items: center; }
.auth-foot .i { width: 14px; height: 14px; color: var(--gr); }
.auth .alert { text-align: left; margin-bottom: 4px; }

/* page transitions */
body { animation: pagein .5s var(--ease) both; }
body.leaving .content, body.leaving .auth-box { opacity: 0; transform: translateY(10px); transition: .25s; }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1200px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .os-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
	.grid2, .grid2.wide-left, .msg-ed { grid-template-columns: minmax(0, 1fr); }
	.row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero { flex-wrap: wrap; }
	.hero-btns { width: 100%; }
	.hero-btns form { justify-content: flex-start; }
}
@media (max-width: 860px) {
	.side { transform: translateX(-105%); box-shadow: 30px 0 60px rgba(0, 0, 0, .6); }
	body.nav-open .side { transform: none; }
	.main { margin-left: 0; }
	.top { padding: 14px 16px; }
	.top .menu { display: inline-grid; }
	.content { padding: 20px 16px 10px; }
	.foot { padding: 18px 16px 24px; }
}
@media (max-width: 600px) {
	.stats, .row2, .row3, .os-grid { grid-template-columns: minmax(0, 1fr); }
	.hero { padding: 22px 18px; gap: 18px; }
	.hero-orb { width: 96px; height: 96px; }
	.hero-txt h2 { font-size: 24px; }
	.rule { flex-wrap: wrap; }
	.rule > .sel, .rule > .in { flex: 1 1 100%; }
	.rule .arrow { transform: rotate(90deg); }
	.card { padding: 18px; }
	.top h1 { font-size: 18px; }
	.pill span { display: none; }
	.in.small { width: 100%; }
	.sticky-save { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- group picker ---------- */
.picker { position: relative; }
.pk-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 58px; padding: 9px; border-radius: 16px; background: rgba(5, 6, 13, .55); border: 1px solid var(--line2); transition: border-color .3s, box-shadow .3s; }
.picker.open .pk-box { border-color: var(--cy); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12), 0 0 30px -8px rgba(34, 211, 238, .6); }
.pk-tags { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.pk-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 6px 6px 11px; border-radius: 30px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(120deg, rgba(34, 211, 238, .28), rgba(168, 85, 247, .32)); border: 1px solid rgba(168, 85, 247, .45); box-shadow: 0 6px 18px -10px rgba(168, 85, 247, .9); animation: tagin .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.pk-tag .i { width: 14px; height: 14px; color: #a5f3fc; }
.pk-tag small { color: #e9d5ff; font-weight: 600; font-size: 11px; }
.pk-tag button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); transition: .25s; }
.pk-tag button:hover { background: var(--pk); transform: rotate(90deg); }
.pk-tag button .i { width: 12px; height: 12px; color: #fff; }
.pk-tag.bye { animation: tagout .3s var(--ease) forwards; }
@keyframes tagin { from { opacity: 0; transform: scale(.4) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tagout { to { opacity: 0; transform: scale(.4); } }
.pk-none { color: var(--mut); font-size: 13px; padding: 0 6px; display: inline-flex; align-items: center; gap: 8px; }
.pk-none .i { width: 15px; height: 15px; color: var(--vi); }
.pk-open { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 9px 14px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; border: 0; background: linear-gradient(120deg, #0891b2, #7c3aed 60%, #db2777); background-size: 200% 100%; animation: flow 6s linear infinite; box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .9); position: relative; overflow: hidden; transition: transform .2s var(--ease); }
.pk-open:hover { transform: translateY(-2px); }
.pk-open .i { width: 16px; height: 16px; }
.pk-open em { font-style: normal; min-width: 22px; padding: 1px 7px; border-radius: 20px; font-size: 12px; background: rgba(0, 0, 0, .3); }
.pk-open .pk-caret { transition: transform .35s var(--ease); }
.picker.open .pk-open .pk-caret { transform: rotate(180deg); }
.card.pk-raise { z-index: 30; }
.pk-pop {
	position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 10px); border-radius: 18px; overflow: hidden;
	background: rgba(13, 15, 32, .97); border: 1px solid var(--line2); backdrop-filter: blur(18px); box-shadow: 0 30px 70px -20px #000, 0 0 0 1px rgba(34, 211, 238, .1), 0 0 50px -20px rgba(168, 85, 247, .7);
	opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top center; transition: opacity .28s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.picker.open .pk-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .35s var(--ease); }
.pk-pop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); background-size: 200% 100%; animation: flow 3s linear infinite; }
.pk-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.pk-search { position: relative; flex: 1; }
.pk-search .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--mut); transition: .3s; }
.pk-search input { width: 100%; font: inherit; color: var(--txt); padding: 10px 12px 10px 40px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(5, 6, 13, .7); outline: none; transition: .3s; }
.pk-search input:focus { border-color: var(--cy); box-shadow: 0 0 0 3px rgba(34, 211, 238, .14); }
.pk-search:focus-within .i { color: var(--cy); transform: translateY(-50%) scale(1.15); }
.pk-sum { color: var(--mut); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 4px 14px 12px; }
.pk-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: rgba(148, 163, 255, .04); font-size: 14px; font-weight: 600; color: #c7cbef; transition: background .2s, border-color .2s, transform .2s var(--ease), color .2s; }
.picker.open .pk-item { animation: rise .4s var(--ease) both; animation-delay: calc(min(var(--i), 18) * 18ms); }
.pk-item input { position: absolute; opacity: 0; pointer-events: none; }
.pk-item:hover { background: rgba(148, 163, 255, .09); border-color: var(--line2); transform: translateX(3px); color: #fff; }
.pk-check { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1.5px solid rgba(148, 163, 255, .35); transition: .3s var(--ease); }
.pk-check .i { width: 14px; height: 14px; color: #001018; stroke-width: 3; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.pk-ico .i { width: 16px; height: 16px; color: var(--vi); }
.pk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-item small { color: #6b7199; font-size: 11.5px; }
.pk-item.on { color: #fff; background: linear-gradient(120deg, rgba(34, 211, 238, .14), rgba(168, 85, 247, .16)); border-color: rgba(34, 211, 238, .35); }
.pk-item.on .pk-check { background: var(--cy); border-color: var(--cy); box-shadow: 0 0 12px var(--cy); }
.pk-item.on .pk-check .i { transform: scale(1); }
.pk-item.on .pk-ico .i { color: var(--cy); }
.pk-item.hide { display: none; }
.pk-item mark { background: rgba(245, 158, 11, .35); color: #fff; border-radius: 3px; padding: 0 1px; }
.pk-empty { grid-column: 1 / -1; display: none; flex-direction: column; align-items: center; gap: 8px; padding: 22px; color: var(--mut); }
.pk-empty .i { width: 28px; height: 28px; color: var(--vi); animation: float 3s ease-in-out infinite; }
.pk-empty.show { display: flex; }
.pk-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(5, 6, 13, .4); }

/* ---------- watchdog ---------- */
.wd-state { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 16px; margin-bottom: 18px; border: 1px solid; }
.wd-ok .wd-state { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .35); }
.wd-bad .wd-state { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .4); }
.wd-state b { font-size: 17px; }
.wd-state p { margin: 3px 0 0; color: var(--mut); font-size: 13px; }
.wd-radar { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; --c: var(--gr); }
.wd-bad .wd-radar { --c: var(--ye); }
.wd-radar > .i { position: relative; z-index: 1; width: 26px; height: 26px; color: var(--c); filter: drop-shadow(0 0 8px var(--c)); }
.wd-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: ripple 2.6s var(--ease) infinite; }
.wd-radar i:nth-child(2) { animation-delay: .85s; } .wd-radar i:nth-child(3) { animation-delay: 1.7s; }
.wd-bad .wd-radar > .i { animation: beat 1.4s ease-in-out infinite; }
.wd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 6px; }
.wd-way { padding: 18px; border-radius: 16px; background: rgba(5, 6, 13, .4); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: .3s var(--ease); }
.wd-way:hover { border-color: var(--line2); transform: translateY(-3px); }
.wd-top { display: flex; align-items: center; gap: 12px; }
.wd-top h3 { margin: 0; font-size: 15px; flex: 1; }
.wd-top em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; color: #bbf7d0; background: rgba(34, 197, 94, .18); border: 1px solid rgba(34, 197, 94, .4); }
.wd-num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--cy), var(--vi)); box-shadow: 0 6px 16px -6px var(--vi); }
.steps { margin: 0; padding-left: 20px; color: #c7cbef; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.steps li::marker { color: var(--cy); font-weight: 800; }
.steps b { color: #fff; }
.btn.ok-copied, [data-copy].ok { border-color: var(--gr) !important; box-shadow: 0 0 18px -4px var(--gr); }
@media (max-width: 1000px) { .wd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
	.pk-list { grid-template-columns: minmax(0, 1fr); max-height: 260px; }
	.pk-open { margin-left: 0; width: 100%; justify-content: center; }
	.pk-foot .btn { flex: 1; }
	.copy-box { flex-direction: column; align-items: stretch; }
}.pk-foot .btn { white-space: nowrap; }

/* ---------- new node types ---------- */
.t-afk .ico { background: linear-gradient(135deg, rgba(99, 102, 241, .35), rgba(34, 211, 238, .2)); }
.t-stats_channels .ico { background: linear-gradient(135deg, rgba(34, 197, 94, .3), rgba(245, 158, 11, .22)); }
.t-admin_poke .ico { background: linear-gradient(135deg, rgba(245, 158, 11, .32), rgba(244, 63, 94, .25)); }
.t-admin_poke .ico .i { animation: ring 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(9deg); } 90% { transform: rotate(-6deg); } }

/* AFK rule rows */
.afk-rule { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px minmax(0, 1fr) 36px; align-items: end; gap: 10px 12px; padding: 14px; }
.afk-rule .grip { align-self: center; }
.afk-rule .arrow { align-self: center; padding-top: 18px; }
.afk-col, .afk-when { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.afk-col small, .afk-when small { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.afk-col small .i, .afk-when small .i { width: 13px; height: 13px; color: var(--cy); }
.afk-when { grid-column: 2 / 5; }
.afk-rule [data-del] { grid-column: 5; grid-row: 1; align-self: center; }
.tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 30px; font: inherit; font-size: 13px; font-weight: 700; color: var(--mut); background: rgba(5, 6, 13, .55); border: 1px solid var(--line2); transition: .3s var(--ease); }
.tchip .i { width: 15px; height: 15px; }
.tchip .tchip-ok { width: 0; opacity: 0; transition: .3s var(--ease); }
.tchip:hover { color: var(--txt); border-color: var(--cy); transform: translateY(-1px); }
.tchip.on { color: #fff; border-color: transparent; background: linear-gradient(120deg, rgba(99, 102, 241, .45), rgba(34, 211, 238, .3)); box-shadow: 0 0 18px -5px rgba(99, 102, 241, .9); }
.tchip.on .tchip-ok { width: 14px; opacity: 1; color: #a5f3fc; }
.tchip.on > .i:first-of-type { animation: pop .35s var(--ease); }
.tchip-in { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 30px; background: rgba(5, 6, 13, .55); border: 1px solid var(--line2); font-size: 13px; font-weight: 700; color: var(--mut); transition: .3s; }
.tchip-in:focus-within { border-color: var(--cy); color: var(--txt); }
.tchip-in .i { width: 15px; height: 15px; color: var(--ye); }
.tchip-in input { width: 64px; font: inherit; color: #fff; background: rgba(148, 163, 255, .1); border: 0; border-radius: 20px; padding: 5px 8px; text-align: center; outline: none; }

/* statistics channels */
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.sc-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: rgba(5, 6, 13, .42); border: 1px solid var(--line); animation: rise .5s var(--ease) both; animation-delay: var(--d); transition: .3s var(--ease); }
.sc-card:hover { border-color: var(--line2); transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(34, 211, 238, .5); }
.sc-top { display: flex; gap: 12px; align-items: center; }
.sc-top h3 { margin: 0; font-size: 15px; }
.sc-top p { margin: 2px 0 0; color: var(--mut); font-size: 12px; }
.sc-online .ico { background: linear-gradient(135deg, rgba(34, 197, 94, .35), rgba(34, 211, 238, .2)); }
.sc-record .ico { background: linear-gradient(135deg, rgba(245, 158, 11, .38), rgba(244, 63, 94, .2)); }
.sc-admin .ico { background: linear-gradient(135deg, rgba(168, 85, 247, .38), rgba(244, 63, 94, .22)); }
.sc-record .ico .i { animation: bob 2.4s ease-in-out infinite; }
.ts-chan { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #1b1d27; border: 1px solid #2c3040; font: 13px Verdana, Tahoma, sans-serif; color: #d5d8ea; min-height: 38px; }
.ts-chan-ico .i { width: 15px; height: 15px; color: #5b8cff; }
.ts-chan-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-chan-name.center { text-align: center; font-weight: 700; color: #fff; }
.ts-chan-name.long { color: #fda4af; }

/* admin poke */
.ap-rule { display: grid; grid-template-columns: 38px minmax(0, .8fr) minmax(0, 1.4fr) 36px; align-items: center; gap: 10px; }
.ap-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(245, 158, 11, .3), rgba(244, 63, 94, .25)); }
.ap-av .i { width: 18px; height: 18px; color: #fff; }
.ap-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.userpick { position: relative; }
.userpick .up-pop { width: min(420px, calc(100vw - 60px)); right: auto; }
.userpick.open .up-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .35s var(--ease); }
.up-list { max-height: 300px; overflow: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.up-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; font: inherit; color: #c7cbef; background: rgba(148, 163, 255, .04); border: 1px solid transparent; transition: .2s var(--ease); animation: rise .35s var(--ease) both; }
.up-item:hover { background: rgba(148, 163, 255, .1); border-color: var(--line2); color: #fff; transform: translateX(3px); }
.up-item .i { width: 16px; height: 16px; color: var(--ye); flex: none; }
.up-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.up-item small { color: #6b7199; font-size: 11.5px; white-space: nowrap; }
.up-item.added { opacity: .45; pointer-events: none; }
.userpick .pk-empty.show { display: flex; }
.poke-prev { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #1b1d27; border: 1px solid #2c3040; }
.poke-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(245, 158, 11, .18); }
.poke-ico .i { width: 22px; height: 22px; color: var(--ye); animation: ring 2.2s ease-in-out infinite; transform-origin: 50% 10%; }
.poke-prev b { display: block; font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .6px; }
.poke-prev span { font: 14px Verdana, Tahoma, sans-serif; color: #fff; word-break: break-word; }
.poke-prev span.empty { color: var(--mut); font-style: italic; }

@media (max-width: 1100px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
	.afk-rule { grid-template-columns: minmax(0, 1fr) 36px; }
	.afk-rule .grip, .afk-rule .arrow { display: none; }
	.afk-rule .afk-col, .afk-rule .afk-when { grid-column: 1; }
	.afk-rule [data-del] { grid-column: 2; grid-row: 1; }
	.ap-rule { grid-template-columns: minmax(0, 1fr) 36px; }
	.ap-rule .ap-av { display: none; }
	.ap-rule input[name="tu[]"] { grid-column: 1; }
	.ap-rule [data-del] { grid-column: 2; grid-row: 1; }
}
/* ---------- connection quality ---------- */
.t-net_quality .ico { background: linear-gradient(135deg, rgba(34, 211, 238, .35), rgba(34, 197, 94, .25)); }
.net-ok .wd-state { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .35); }
.net-ok .wd-radar { --c: var(--gr); }
.net-bad .wd-state { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .4); }
.net-bad .wd-radar { --c: var(--ye); }
.net-wait .wd-state { background: rgba(34, 211, 238, .06); border-color: rgba(34, 211, 238, .3); }
.net-wait .wd-radar { --c: var(--cy); }
.net-state .wd-state { margin: 0; }
.unit { position: relative; }
.unit .in { padding-right: 52px; }
.unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mut); font-weight: 700; font-size: 13px; pointer-events: none; }
.tbl-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; padding: 11px 14px; color: var(--mut); font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; background: rgba(5, 6, 13, .55); position: sticky; top: 0; }
.tbl td { padding: 10px 14px; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl tr { animation: rise .4s var(--ease) both; }
.tbl tbody tr:hover td { background: rgba(148, 163, 255, .05); }
.tbl .mut { color: var(--mut); }
.lv { display: inline-block; min-width: 64px; text-align: center; padding: 3px 9px; border-radius: 20px; font-weight: 800; font-size: 12.5px; font-family: "Cascadia Code", Consolas, monospace; }
.lv.good { color: #86efac; background: rgba(34, 197, 94, .14); }
.lv.mid { color: #fcd34d; background: rgba(245, 158, 11, .14); }
.lv.bad { color: #fda4af; background: rgba(244, 63, 94, .16); box-shadow: 0 0 12px -4px var(--pk); }
.sub-h { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 14px; }
.sub-h .i { color: var(--ye); }
.pf { margin-top: 18px; }