@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:#050507;
    --bg-raised:#0A0812;
    --surface:rgba(20,16,32,0.6);
    --surface-solid:#0F0C18;
    --surface-hover:rgba(139,92,246,0.06);

    --border:rgba(139,92,246,0.14);
    --border-light:rgba(139,92,246,0.22);
    --border-strong:rgba(139,92,246,0.35);

    --text:#F5F3FF;
    --text-secondary:#B4B0C8;
    --text-muted:#6E6A82;
    --text-faint:#4A4560;

    --v-50:#F5F3FF;
    --v-200:#DDD6FE;
    --v-300:#C4B5FD;
    --v-400:#A78BFA;
    --v-500:#8B5CF6;
    --v-600:#7C3AED;
    --v-700:#6D28D9;
    --v-800:#5B21B6;

    --accent:#8B5CF6;
    --accent-hover:#A78BFA;
    --accent-soft:rgba(139,92,246,0.12);
    --accent-glow:rgba(139,92,246,0.45);

    --danger:#F87171;
    --danger-hover:#FCA5A5;
    --success:#6EE7B7;
    --success-strong:#34D399;
    --warning:#FCD34D;

    --radius:6px;
    --radius-lg:12px;
    --radius-xl:18px;
    --sidebar-w:240px;

    --transition:160ms cubic-bezier(.4,0,.2,1);

    --font-display:'Unbounded',system-ui,sans-serif;
    --font-body:'Inter',system-ui,-apple-system,sans-serif;
    --font-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
}

html,body{height:100%}
body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    position:relative;
    overflow-x:hidden;
}
body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(900px 540px at 78% -10%, rgba(139,92,246,0.18), transparent 65%),
      radial-gradient(700px 480px at -10% 100%, rgba(79,70,229,0.13), transparent 65%);
}
body::after{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      linear-gradient(rgba(139,92,246,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139,92,246,0.035) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 80%);
}
#screenDashboard, .auth-screen, .main-content { position:relative; z-index:1; }

.hidden{display:none!important}
a{color:var(--accent-hover);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--v-300)}

code{
    background:rgba(139,92,246,0.10);
    padding:.15em .5em;
    border-radius:5px;
    font-size:.85em;
    color:var(--v-300);
    font-family:var(--font-mono);
    border:1px solid rgba(139,92,246,0.18);
}

.auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.auth-card{
    background:var(--surface);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border-light);
    border-radius:var(--radius-xl);
    padding:2.25rem;
    width:100%;max-width:400px;
    box-shadow:0 30px 80px -20px rgba(139,92,246,0.4),0 8px 32px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.04);
}
.auth-logo{font-family:var(--font-display);font-size:1.55rem;font-weight:700;text-align:center;margin-bottom:.4rem;letter-spacing:-.02em;color:var(--text)}
.auth-logo span{background:linear-gradient(135deg,var(--v-400),var(--v-700));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-subtitle{text-align:center;color:var(--text-muted);font-size:.85rem;margin-bottom:1.5rem;font-family:var(--font-mono);letter-spacing:.02em}
.auth-tabs{display:flex;gap:0;margin-bottom:1.25rem;border-bottom:1px solid var(--border)}
.auth-tab{flex:1;padding:.65rem;border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;border-bottom:2px solid transparent;transition:var(--transition);font-family:inherit;font-weight:500}
.auth-tab:hover{color:var(--text-secondary)}
.auth-tab.active{color:var(--text);border-bottom-color:var(--v-400)}
.auth-form{display:flex;flex-direction:column;gap:.75rem}
.auth-form input{padding:.7rem .95rem;border:1px solid var(--border);border-radius:var(--radius);background:rgba(0,0,0,0.4);color:var(--text);font-size:.9rem;outline:none;transition:var(--transition);font-family:inherit}
.auth-form input:focus{border-color:var(--v-400);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}
.auth-form input::placeholder{color:var(--text-muted)}
.auth-error{color:var(--danger);font-size:.85rem;margin-top:.5rem;min-height:1.2em;text-align:center}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.55rem .95rem;
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    background:rgba(139,92,246,0.04);
    color:var(--text-secondary);
    font-size:.85rem;font-weight:500;
    cursor:pointer;
    transition:var(--transition);
    white-space:nowrap;
    font-family:inherit;
}
.btn:hover{background:rgba(139,92,246,0.10);color:var(--text);border-color:var(--border-strong)}
.btn:active{transform:translateY(1px)}

.btn-accent{
    background:linear-gradient(135deg,var(--v-500),var(--v-700));
    border:1px solid transparent;
    color:#fff;
    font-weight:600;
    box-shadow:0 4px 14px rgba(139,92,246,0.35),inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-accent:hover{
    background:linear-gradient(135deg,var(--v-400),var(--v-600));
    color:#fff;border-color:transparent;
    box-shadow:0 6px 20px rgba(139,92,246,0.5),inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-danger{background:linear-gradient(135deg,#EF4444,#B91C1C);border:1px solid transparent;color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(239,68,68,0.3),inset 0 1px 0 rgba(255,255,255,0.18)}
.btn-danger:hover{background:linear-gradient(135deg,#F87171,#DC2626);color:#fff;border-color:transparent}

.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:rgba(139,92,246,0.08);color:var(--text);border-color:transparent}

.btn-sm{padding:.35rem .7rem;font-size:.78rem}
.btn-block{width:100%}

#screenDashboard{display:flex;height:100vh;overflow:hidden}

.sidebar{
    width:var(--sidebar-w);flex-shrink:0;
    background:rgba(7,5,14,0.7);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    height:100vh;overflow-y:auto;
    position:relative;z-index:2;
}

.sidebar-brand{
    display:flex;align-items:center;gap:.65rem;
    padding:1.25rem 1.1rem 1.15rem;
    border-bottom:1px solid var(--border);
}
.brand-icon{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(135deg,var(--v-400),var(--v-700));
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.95rem;
    flex-shrink:0;
    font-family:var(--font-display);
    box-shadow:0 6px 16px rgba(139,92,246,0.45),inset 0 1px 0 rgba(255,255,255,0.25);
    position:relative;
}
.brand-icon::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 50%);
    pointer-events:none;
}
.brand-text{
    font-family:var(--font-display);
    font-weight:600;font-size:1rem;letter-spacing:-.01em;
    color:var(--text);
}
.brand-text b{font-weight:300;color:var(--v-300)}

.sidebar-nav{flex:1;padding:.85rem .55rem;display:flex;flex-direction:column;gap:2px}
.nav-item{
    display:flex;align-items:center;gap:.65rem;
    width:100%;padding:.6rem .8rem;
    border:1px solid transparent;
    border-radius:var(--radius);
    background:none;color:var(--text-muted);
    cursor:pointer;font-size:.875rem;
    text-align:left;transition:var(--transition);
    font-family:inherit;font-weight:500;
    position:relative;
}
.nav-item svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;opacity:.6;transition:var(--transition)}
.nav-item:hover{background:rgba(139,92,246,0.06);color:var(--text-secondary)}
.nav-item:hover svg{opacity:.85}
.nav-item.active{
    background:linear-gradient(90deg,rgba(139,92,246,0.18),rgba(139,92,246,0.04));
    color:var(--text);
    border-color:rgba(139,92,246,0.25);
    box-shadow:inset 0 0 24px rgba(139,92,246,0.1);
}
.nav-item.active::before{
    content:"";position:absolute;left:-.55rem;top:25%;bottom:25%;width:2px;
    background:linear-gradient(180deg,var(--v-300),var(--v-600));
    border-radius:0 2px 2px 0;
    box-shadow:0 0 8px var(--accent-glow);
}
.nav-item.active svg{opacity:1;color:var(--v-300);filter:drop-shadow(0 0 4px var(--accent-glow))}

.nav-divider{height:1px;background:var(--border);margin:.6rem .8rem}
.nav-label{
    font-family:var(--font-mono);
    font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;
    color:var(--text-faint);
    padding:.55rem .8rem .25rem;
    font-weight:500;
}

.sidebar-footer{
    display:flex;align-items:center;gap:.55rem;
    padding:.85rem 1rem;
    border-top:1px solid var(--border);
    background:rgba(0,0,0,0.25);
}
.sidebar-user{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}
.user-avatar{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--v-500),var(--v-800));
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:600;font-size:.78rem;flex-shrink:0;
    font-family:var(--font-display);
    box-shadow:0 0 0 1px rgba(139,92,246,0.3),0 4px 12px rgba(139,92,246,0.25);
}
.user-meta{display:flex;flex-direction:column;min-width:0}
.user-name{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.user-role{font-family:var(--font-mono);font-size:.62rem;color:var(--v-300);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.logout-btn{background:none;border:1px solid transparent;color:var(--text-muted);cursor:pointer;padding:.45rem;border-radius:var(--radius);transition:var(--transition)}
.logout-btn:hover{background:rgba(239,68,68,0.1);color:var(--danger);border-color:rgba(239,68,68,0.25)}
.logout-btn svg{width:16px;height:16px;fill:currentColor;display:block}

.main-content{flex:1;overflow-y:auto;padding:1.75rem 2rem;min-width:0}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.page-header h1{
    font-family:var(--font-display);
    font-size:1.45rem;font-weight:600;letter-spacing:-.02em;
    background:linear-gradient(180deg,#fff,#C4B5FD);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.page-actions{display:flex;align-items:center;gap:.5rem}
.page-hint{color:var(--text-muted);font-size:.82rem;margin-bottom:1rem;font-family:var(--font-mono);letter-spacing:.01em}

.bots-tabs{display:flex;gap:0;margin-bottom:1rem;border-bottom:1px solid var(--border)}
.bots-tab{
    padding:.55rem 1.2rem;border:none;background:none;
    color:var(--text-muted);cursor:pointer;
    font-size:.875rem;font-weight:500;
    border-bottom:2px solid transparent;
    transition:var(--transition);font-family:inherit;
    position:relative;top:1px;
}
.bots-tab:hover{color:var(--text-secondary)}
.bots-tab.active{color:var(--text);border-bottom-color:var(--v-400)}
.bots-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--v-400),transparent);box-shadow:0 0 12px var(--accent-glow)}

.card{
    background:var(--surface);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:1.25rem;
    box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px rgba(0,0,0,0.35);
    position:relative;
}
.card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(139,92,246,0.05),transparent 30%);
}
.card-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:.5rem;
    padding:.85rem 1.15rem;
    font-family:var(--font-display);
    font-weight:500;font-size:.9rem;letter-spacing:-.005em;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,rgba(139,92,246,0.04),transparent);
    color:var(--text);
    position:relative;
}
.card-body{padding:1.15rem;position:relative}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem}
.stat-card{
    background:linear-gradient(180deg,rgba(139,92,246,0.06),rgba(139,92,246,0.01));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:.85rem 1rem;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}
.stat-card:hover{border-color:var(--border-strong);background:linear-gradient(180deg,rgba(139,92,246,0.10),rgba(139,92,246,0.02))}
.stat-label{
    font-family:var(--font-mono);
    font-size:.65rem;color:var(--v-300);
    margin-bottom:.3rem;
    text-transform:uppercase;letter-spacing:.12em;font-weight:500;
}
.stat-value{
    font-family:var(--font-display);
    font-size:1.5rem;font-weight:600;letter-spacing:-.02em;
    color:var(--text);
}

.table-container{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:rgba(15,12,24,0.5);
    backdrop-filter:blur(12px);
}
table{width:100%;border-collapse:collapse}
th,td{padding:.65rem 1rem;text-align:left;border-bottom:1px solid rgba(139,92,246,0.08)}
th{
    font-family:var(--font-mono);
    color:var(--v-300);
    font-weight:500;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.1em;
    background:rgba(139,92,246,0.04);
}
tr:last-child td{border-bottom:none}
tr.clickable-row{cursor:pointer;transition:background var(--transition)}
tr.clickable-row:hover td{background:rgba(139,92,246,0.06)}
.cell-actions{white-space:normal;min-width:150px}
.cell-actions .btn{margin:.15rem .2rem .15rem 0}

.status-on{color:var(--success);font-weight:500;text-shadow:0 0 8px rgba(110,231,183,0.4)}
.status-off{color:var(--text-muted)}

.admin-col{display:none}
body.is-admin .admin-col{display:table-cell}
body:not(.is-admin) .admin-only{display:none!important}

.badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:24px;padding:2px 9px;border-radius:99px;
    background:rgba(139,92,246,0.15);
    color:var(--v-200);
    font-size:.78rem;font-weight:600;
    border:1px solid rgba(139,92,246,0.25);
    font-family:var(--font-mono);
}

.input,.select-sm{
    padding:.6rem .85rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(0,0,0,0.4);
    color:var(--text);
    font-size:.875rem;
    outline:none;
    transition:var(--transition);
    font-family:inherit;
    width:100%;
}
.input:focus,.select-sm:focus{border-color:var(--v-400);box-shadow:0 0 0 3px rgba(139,92,246,0.15);background:rgba(0,0,0,0.55)}
.input::placeholder{color:var(--text-muted)}
.select-sm{width:auto;padding:.4rem .65rem;font-size:.82rem}

.form-stack{display:flex;flex-direction:column;gap:.65rem}
.form-label{font-family:var(--font-mono);font-size:.72rem;color:var(--v-300);font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.text-muted{color:var(--text-muted);font-size:.85rem}
.result-text{margin-top:.7rem;font-size:.85rem;color:var(--text-secondary);font-family:var(--font-mono)}

.mb-1{margin-bottom:.85rem}
.mt-1{margin-top:.85rem}

.client-header-info{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.client-name{
    font-family:var(--font-display);
    font-size:1.15rem;font-weight:600;letter-spacing:-.01em;
    color:var(--text);
}
.client-status{
    font-family:var(--font-mono);
    font-size:.7rem;padding:.25rem .6rem;border-radius:99px;
    background:rgba(139,92,246,0.08);border:1px solid var(--border);
    color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.08em;font-weight:500;
}
.client-status.online{background:rgba(52,211,153,0.12);color:var(--success-strong);border-color:rgba(52,211,153,0.3);box-shadow:0 0 12px rgba(52,211,153,0.2)}
.client-status.online::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:6px;box-shadow:0 0 8px var(--success);animation:pulse 1.6s infinite;vertical-align:middle}
@keyframes pulse{50%{opacity:.4}}

.client-layout{display:flex;gap:1.25rem;align-items:flex-start}
.client-sidebar{
    width:200px;flex-shrink:0;
    background:var(--surface);
    backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:.5rem;
    position:sticky;top:1rem;
}
.client-nav{display:flex;flex-direction:column;gap:1px}
.client-nav-item{
    padding:.5rem .8rem;
    border:1px solid transparent;
    border-radius:var(--radius);
    background:none;
    color:var(--text-muted);
    cursor:pointer;
    font-size:.82rem;font-weight:500;
    text-align:left;transition:var(--transition);
    font-family:inherit;
}
.client-nav-item:hover{background:rgba(139,92,246,0.06);color:var(--text-secondary)}
.client-nav-item.active{
    background:linear-gradient(90deg,rgba(139,92,246,0.20),rgba(139,92,246,0.04));
    color:var(--text);
    border-color:rgba(139,92,246,0.28);
    box-shadow:inset 2px 0 0 var(--v-400);
}
.client-main{flex:1;min-width:0}
.client-tab.hidden{display:none!important}

.info-grid{display:grid;gap:.3rem}
.info-row{display:grid;grid-template-columns:140px 1fr;gap:.5rem;padding:.3rem 0}
.info-label{font-size:.82rem;color:var(--text-muted)}
.info-value{font-size:.875rem;word-break:break-all}

.actions-grid{display:flex;flex-wrap:wrap;gap:.45rem}

.stream-toolbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.stream-viewport{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#020204;
    padding:.5rem;margin-top:.85rem;
    box-shadow:inset 0 0 60px rgba(139,92,246,0.05);
}
.stream-viewport-remote{min-height:60vh;display:flex;align-items:center;justify-content:center;position:relative}
.stream-img{display:block;max-width:100%;max-height:80vh;border-radius:4px;object-fit:contain}
.stream-viewport-remote canvas.stream-img-remote{width:100%;max-width:100%;height:auto;max-height:80vh;object-fit:contain}
.stream-img-remote{cursor:crosshair}
.stream-placeholder{display:block;padding:2rem;color:var(--text-muted);text-align:center;font-family:var(--font-mono);letter-spacing:.05em}

.toggle-label{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;cursor:pointer;user-select:none;color:var(--text-secondary)}
.toggle-label input[type=checkbox]{width:.95rem;height:.95rem;accent-color:var(--v-500);cursor:pointer}
.toolbar-sep{width:1px;height:1.2rem;background:var(--border);margin:0 .3rem}
.rdp-slider{width:90px;height:4px;accent-color:var(--v-500);cursor:pointer;vertical-align:middle}
.rdp-brightness-label span{font-size:.82rem;color:var(--text-secondary);min-width:1.5ch;text-align:right}
.stream-viewport-remote.rdp-fullscreen{position:fixed;inset:0;z-index:100;min-height:100vh;background:#000;border:none;border-radius:0;margin:0;padding:0}
.stream-viewport-remote.rdp-fullscreen .stream-img-remote{max-width:100vw;max-height:100vh;width:100%;height:100%;object-fit:contain}
.rdp-fullscreen-toolbar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:101;background:rgba(7,5,14,0.92);backdrop-filter:blur(12px);border:1px solid var(--border-light);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:.4rem .85rem;display:flex;align-items:center;gap:.55rem;opacity:0;transition:opacity .2s}
.rdp-fullscreen-toolbar:hover,.rdp-fullscreen-toolbar.visible{opacity:1}

.terminal-output{
    width:100%;
    min-height:280px;max-height:450px;overflow-y:auto;
    padding:.85rem 1.1rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#020204;
    color:#DDD6FE;
    font-family:var(--font-mono);
    font-size:.78rem;line-height:1.7;
    white-space:pre-wrap;word-break:break-all;
    box-shadow:inset 0 0 60px rgba(139,92,246,0.04);
}
.terminal-input-row{display:flex;gap:.55rem;margin-top:.55rem}
.terminal-input{
    flex:1;padding:.55rem .85rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(0,0,0,0.55);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:.82rem;outline:none;
    transition:var(--transition);
}
.terminal-input:focus{border-color:var(--v-400);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}
.terminal-input::placeholder{color:var(--text-muted)}

.code-editor{
    width:100%;min-height:200px;
    padding:.85rem 1.1rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(0,0,0,0.55);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:.82rem;line-height:1.6;
    resize:vertical;outline:none;margin-bottom:.85rem;
    transition:var(--transition);
}
.code-editor:focus{border-color:var(--v-400);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}

.active-window-box{
    padding:.85rem 1rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(0,0,0,0.4);
    font-family:var(--font-mono);
    font-size:.92rem;font-weight:500;
    min-height:2.6rem;
    display:flex;align-items:center;
    margin-top:.55rem;
    color:var(--v-200);
}

.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal.hidden{display:none!important}
.modal-overlay{position:absolute;inset:0;background:rgba(5,5,7,0.78);backdrop-filter:blur(8px)}
.modal-card{
    position:relative;
    background:var(--surface-solid);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    max-width:440px;width:100%;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(139,92,246,0.15),0 0 60px -10px rgba(139,92,246,0.4);
}
.modal-buttons{display:flex;gap:.75rem;margin-top:.5rem}
.modal-buttons .btn{flex:1}

.toast{
    position:fixed;bottom:1.5rem;right:1.5rem;
    z-index:300;padding:.75rem 1.15rem;
    border-radius:var(--radius-lg);
    background:var(--surface-solid);
    border:1px solid var(--border-light);
    color:var(--text);
    font-size:.85rem;
    box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 30px -8px var(--accent-glow);
    animation:toastIn .3s cubic-bezier(.4,0,.2,1);
    max-width:400px;
    backdrop-filter:blur(20px);
}
.toast.hidden{display:none!important}
.toast.toast-error{border-color:rgba(248,113,113,0.4);color:var(--danger);box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 30px -8px rgba(248,113,113,0.5)}
.toast.toast-success{border-color:rgba(110,231,183,0.4);color:var(--success-strong);box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 30px -8px rgba(52,211,153,0.5)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.role-badge{
    font-family:var(--font-mono);
    font-size:.65rem;padding:.2em .55em;
    border-radius:4px;font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;
}
.role-badge.admin{background:rgba(139,92,246,0.18);color:var(--v-300);border:1px solid rgba(139,92,246,0.35);box-shadow:0 0 12px rgba(139,92,246,0.2)}
.role-badge.user{background:rgba(255,255,255,0.05);color:var(--text-muted);border:1px solid var(--border)}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.18);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,0.35)}

.tags-container{display:flex;flex-wrap:wrap;gap:.4rem;min-height:28px;margin-bottom:.55rem}
.tag-badge{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.22rem .65rem;
    border-radius:99px;
    background:rgba(139,92,246,0.12);
    color:var(--v-200);
    font-family:var(--font-mono);
    font-size:.72rem;font-weight:500;
    border:1px solid rgba(139,92,246,0.22);
    letter-spacing:.02em;
}
.tag-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.95rem;line-height:1;padding:0 0 0 .15rem;opacity:.6;transition:opacity .15s}
.tag-remove:hover{opacity:1;color:var(--danger)}
.tags-input-row{display:flex;gap:.55rem;margin-bottom:.85rem}

.sub-block{padding:.85rem 0;border-top:1px solid var(--border)}
.sub-status{
    font-family:var(--font-mono);
    font-weight:600;padding:.22rem .65rem;
    border-radius:5px;font-size:.78rem;
    letter-spacing:.04em;text-transform:uppercase;
}
.sub-active{background:rgba(110,231,183,0.14);color:var(--success-strong);border:1px solid rgba(110,231,183,0.3)}
.sub-expired{background:rgba(248,113,113,0.14);color:var(--danger);border:1px solid rgba(248,113,113,0.3)}
.sub-info{font-size:.82rem;color:var(--text-secondary)}

#clientTabProcesses .table-container{max-width:760px}
#clientTabProcesses table td:first-child{width:80px;font-family:var(--font-mono);color:var(--v-300)}
#clientTabProcesses table td:last-child{width:80px;text-align:right}

.file-breadcrumbs{
    padding:.5rem .85rem;
    background:rgba(0,0,0,0.4);
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-bottom:.85rem;
    font-family:var(--font-mono);
    font-size:.8rem;color:var(--text-secondary);
    overflow-x:auto;white-space:nowrap;
}
.bc-item{cursor:pointer;color:var(--v-300);transition:color .15s}
.bc-item:hover{color:var(--v-200);text-decoration:underline}

.voice-visualizer{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#020204;
    padding:.4rem;margin-top:.55rem;overflow:hidden;
    box-shadow:inset 0 0 30px rgba(139,92,246,0.06);
}
.voice-visualizer canvas{display:block;width:100%;height:80px;border-radius:4px}

.os-icon{display:inline-block;width:16px;height:16px;vertical-align:middle;margin-right:6px}
.country-flag{vertical-align:middle;margin-right:4px;font-size:1.1em}

.sortable-th{user-select:none;cursor:pointer;transition:color var(--transition)}
.sortable-th:hover{color:var(--v-200)}

.bots-pagination{display:flex;align-items:center;gap:.5rem;margin-top:.85rem;flex-wrap:wrap}

@keyframes newBotFlash{0%{background:rgba(110,231,183,0.18)}100%{background:transparent}}
.new-bot-row{animation:newBotFlash 1.6s ease-out}

.bots-filters{display:flex;gap:.55rem;align-items:center;margin-bottom:.85rem;flex-wrap:wrap}

.ctx-menu{
    position:fixed;z-index:250;
    background:var(--surface-solid);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    box-shadow:0 16px 48px rgba(0,0,0,0.7),0 0 30px -10px var(--accent-glow);
    min-width:200px;padding:.35rem 0;
    backdrop-filter:blur(20px);
}
.ctx-menu button{
    display:block;width:100%;text-align:left;
    padding:.45rem 1rem;border:none;background:none;
    color:var(--text-secondary);font-size:.82rem;
    cursor:pointer;font-family:inherit;
    transition:var(--transition);
}
.ctx-menu button:hover{background:rgba(139,92,246,0.12);color:var(--text)}
.ctx-menu .ctx-danger{color:var(--danger)}
.ctx-menu .ctx-danger:hover{background:rgba(248,113,113,0.1)}
.ctx-sep{height:1px;background:var(--border);margin:.25rem 0}

.mass-action-bar{
    display:flex;align-items:center;gap:.55rem;
    padding:.55rem .8rem;
    background:rgba(139,92,246,0.10);
    border:1px solid rgba(139,92,246,0.25);
    border-radius:var(--radius);
    margin-bottom:.85rem;flex-wrap:wrap;
    box-shadow:inset 0 0 24px rgba(139,92,246,0.08);
}
.mass-action-bar span{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--v-200);margin-right:.6rem}

.fav-star{cursor:pointer;font-size:1.05rem;opacity:.25;transition:opacity .15s,transform .15s;user-select:none}
.fav-star:hover{opacity:1;transform:scale(1.15)}
.fav-star.active{opacity:1;color:#FCD34D;text-shadow:0 0 10px rgba(252,211,77,0.5)}

#botMap,#userBotMap{
    background:#0A0814!important;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
#botMap .leaflet-control-attribution,#userBotMap .leaflet-control-attribution{display:none}
.leaflet-container{background:#0A0814!important;outline:none}
.leaflet-control-zoom a{
    background:rgba(20,16,32,0.85)!important;
    color:var(--v-200)!important;
    border:1px solid var(--border-light)!important;
    backdrop-filter:blur(8px);
}
.leaflet-control-zoom a:hover{background:rgba(139,92,246,0.18)!important;color:#fff!important}

.map-tooltip{
    background:rgba(15,12,24,0.95)!important;
    border:1px solid var(--border-light)!important;
    color:var(--text)!important;
    font-family:var(--font-mono)!important;
    font-size:.78rem!important;
    font-weight:500;
    border-radius:6px!important;
    box-shadow:0 8px 28px rgba(0,0,0,0.7),0 0 20px -5px var(--accent-glow)!important;
    padding:6px 10px!important;
    backdrop-filter:blur(8px);
}
.map-tooltip::before{border-top-color:var(--border-light)!important}
.leaflet-interactive:focus{outline:none}

.info-table{width:100%;border-collapse:collapse}
.info-table td{padding:.45rem .8rem;border-bottom:1px solid rgba(139,92,246,0.07);font-size:.85rem}
.info-table td:first-child{
    color:var(--text-muted);
    width:160px;white-space:nowrap;
    font-family:var(--font-mono);
    font-size:.78rem;
    text-transform:uppercase;letter-spacing:.06em;
}
.info-table td:last-child{word-break:break-all;color:var(--text)}
.info-table tr:last-child td{border-bottom:none}
.info-sections{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}

@media(max-width:768px){
    .sidebar{position:fixed;left:-240px;z-index:50;transition:left .3s}
    .sidebar.open{left:0}
    .burger-btn{display:flex!important}
    .main-content{margin-left:0;padding:1rem}
    .client-layout{flex-direction:column}
    .client-sidebar{width:100%;position:static}
    .client-nav{flex-direction:row;flex-wrap:wrap;overflow-x:auto}
    .bots-filters{flex-direction:column;align-items:stretch}
    .bots-filters .input{max-width:100%!important}
    .cell-actions{display:none}
    .admin-col{display:none!important}
    th:nth-child(6),td:nth-child(6){display:none}
    .client-nav-item[data-client-tab="remoteDesktop"],
    .client-nav-item[data-client-tab="webcam"],
    .client-nav-item[data-client-tab="voice"]{display:none}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    #botMap,#userBotMap{height:240px!important}
    .mass-action-bar{flex-direction:column;align-items:flex-start}
}

.burger-btn{
    display:none;position:fixed;top:.85rem;left:.85rem;z-index:51;
    width:36px;height:36px;
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    background:var(--surface-solid);
    color:var(--text);
    align-items:center;justify-content:center;
    cursor:pointer;font-size:1.1rem;
    backdrop-filter:blur(12px);
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
}

@media(max-width:900px){
    .sidebar{width:60px}
    .brand-text,.nav-label,.user-meta{display:none}
    .nav-item{justify-content:center;padding:.55rem}
    .nav-item svg{margin:0}
    .sidebar-brand{justify-content:center;padding:1rem .5rem}
    .sidebar-footer{flex-direction:column;padding:.55rem}
    .main-content{padding:1rem}
    .client-layout{flex-direction:column}
    .client-sidebar{width:100%;position:static}
    .client-nav{flex-direction:row;flex-wrap:wrap}
}

.stealer-log{
    max-height:340px;overflow-y:auto;
    font-family:var(--font-mono);
    font-size:.78rem;line-height:1.7;
    padding:.7rem .85rem;
    background:#020204;
    border-radius:var(--radius);
    border:1px solid var(--border);
    margin-top:.55rem;
    box-shadow:inset 0 0 60px rgba(139,92,246,0.04);
}
.stealer-log .log-line{padding:2px 0;color:var(--text-muted)}
.stealer-log .log-line.success{color:var(--success-strong)}
.stealer-log .log-line.error{color:var(--danger)}
.stealer-log .log-line.warn{color:var(--warning)}

.sub-section{margin-bottom:.85rem}
.sub-section-header{
    font-family:var(--font-mono);
    font-size:.75rem;font-weight:500;
    color:var(--v-300);
    margin-bottom:.65rem;
    text-transform:uppercase;letter-spacing:.1em;
}
.sub-divider{display:flex;align-items:center;gap:.85rem;margin:1.1rem 0;color:var(--text-muted);font-size:.78rem;font-family:var(--font-mono)}
.sub-divider::before,.sub-divider::after{content:'';flex:1;height:1px;background:var(--border)}

.crypto-pay-hint{font-size:.82rem;color:var(--text-secondary);margin-bottom:.65rem}
.btn-crypto{
    background:linear-gradient(135deg,var(--v-500),var(--v-700));
    border:none;color:#fff;
    padding:.65rem 1.15rem;font-weight:600;font-size:.875rem;
    border-radius:var(--radius);cursor:pointer;
    transition:all var(--transition);
    width:100%;display:flex;align-items:center;justify-content:center;gap:.55rem;
    box-shadow:0 4px 14px rgba(139,92,246,0.35),inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-crypto:hover{
    background:linear-gradient(135deg,var(--v-400),var(--v-600));
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(139,92,246,0.5),inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-crypto:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.crypto-icon{font-size:1.1rem}

.invoice-card{
    background:rgba(0,0,0,0.4);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:1.15rem;margin-top:.3rem;
}
.invoice-header{
    font-family:var(--font-display);
    font-size:.92rem;font-weight:600;color:var(--success-strong);
    margin-bottom:.85rem;display:flex;align-items:center;gap:.45rem;
}
.invoice-header::before{
    content:'✓';
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:50%;
    background:rgba(110,231,183,0.15);color:var(--success-strong);
    font-size:.75rem;flex-shrink:0;
}
.invoice-details{margin-bottom:.95rem}
.invoice-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;font-size:.82rem}
.invoice-row span:first-child{color:var(--text-muted);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.invoice-value{font-weight:600;color:var(--text)}
.btn-pay-link{margin-bottom:.55rem;text-decoration:none}
.btn-pay-link:hover{text-decoration:none;color:#fff}
.btn-check-payment{
    width:100%;
    background:rgba(110,231,183,0.06);
    border:1px solid rgba(110,231,183,0.3);
    color:var(--success-strong);
    padding:.6rem 1.1rem;
    font-weight:600;cursor:pointer;
    transition:all var(--transition);
    border-radius:var(--radius);
    font-family:inherit;
}
.btn-check-payment:hover{background:rgba(110,231,183,0.14)}
.btn-check-payment:disabled{opacity:.5;cursor:not-allowed}

.fun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.95rem}
.fun-btn-row{display:flex;gap:.55rem;margin-top:.7rem;flex-wrap:wrap}
.fun-input-row{display:flex;align-items:center;gap:.55rem}