/* ══════════════════════════════════════════════
   C2 Framework v3.0 — Stylesheet
   ══════════════════════════════════════════════ */

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

:root {
    --bg:        #080d14;
    --sidebar:   #0d1520;
    --card:      #111927;
    --border:    #1a2a3a;
    --border2:   #243447;
    --accent:    #00d4ff;
    --accent2:   #0099bb;
    --green:     #00ff88;
    --red:       #ff4455;
    --orange:    #ffaa00;
    --text:      #d0dde8;
    --text-dim:  #6a7f95;
    --radius:    10px;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    height: 100vh;
    overflow: hidden;
}

.hidden { display: none !important; }

/* ══ Login ══ */
.login-screen {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}

.login-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 50px 40px;
    width: 380px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.login-logo {
    font-size: 32px;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 8px;
}

.login-subtitle {
    color: var(--text-dim);
    font-size: 12px;
    margin-bottom: 30px;
}

.login-form input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: #1a2a3a;
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border .2s;
}
.login-form input:focus { border-color: var(--accent); }

.login-form button {
    width: 100%;
    padding: 13px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #080d14;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
}
.login-form button:hover { background: var(--accent2); }

.login-error {
    margin-top: 12px;
    color: var(--red);
    font-size: 13px;
    min-height: 18px;
}

/* ══ Layout ══ */
.container {
    display: flex;
    height: 100vh;
}

/* ══ Sidebar ══ */
.sidebar {
    width: 230px;
    background: var(--sidebar);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.logo {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--border);
}
.logo h2 { color: var(--accent); font-size: 18px; margin-bottom: 8px; }

.status-line { display: flex; align-items: center; gap: 8px; }
.status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--text-dim);
    display: inline-block;
    animation: statusPulse 1.4s ease-in-out infinite;
}
.status-dot.online  { background: var(--green);  box-shadow: 0 0 8px var(--green);  }
.status-dot.offline { background: var(--red);    box-shadow: 0 0 8px var(--red);    }
.status-text { font-size: 14px; color: var(--text-dim); font-weight: 600; }

@keyframes statusPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.7); }
}

nav { padding: 10px 0; flex: 1; overflow-y: auto; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    cursor: pointer;
    transition: all .2s;
    border-left: 3px solid transparent;
    color: var(--text-dim);
    user-select: none;
}
.nav-item:hover  { background: #162030; color: var(--text); }
.nav-item.active { background: #162030; color: var(--accent); border-left-color: var(--accent); }

.nav-icon  { font-size: 16px; }
.nav-label { font-size: 15px; color: #fff; font-weight: bold; }

.badge {
    margin-left: auto;
    background: var(--green);
    color: #080d14;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-dim);
}
.btn-logout {
    width: 100%; padding: 7px;
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    transition: all .2s;
}
.btn-logout:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ══ Main Content ══ */
.main-content {
    flex: 1;
    padding: 28px 32px;
    overflow-y: auto;
    background: var(--bg);
}

.tab-content       { display: none; }
.tab-content.active{ display: block; }
.tab-content > h1  { font-size: 22px; margin-bottom: 22px; color: #fff; }

/* ══ Stats ══ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    transition: border .2s;
}
.stat-card:hover { border-color: var(--border2); }
.stat-card.online  { border-top: 3px solid var(--green);  }
.stat-card.offline { border-top: 3px solid var(--red);    }

.stat-icon  { font-size: 24px; margin-bottom: 8px; }
.stat-card h3 { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; }
.stat-number  { font-size: 34px; font-weight: bold; color: #fff; }
.stat-card.online  .stat-number { color: var(--green); }
.stat-card.offline .stat-number { color: var(--red);   }

/* Recent */
.recent-devices h3 { margin-bottom: 12px; font-size: 15px; color: var(--text-dim); }
#recent-list { display: flex; flex-wrap: wrap; gap: 10px; }
.recent-chip {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: border .2s;
}
.recent-chip:hover { border-color: var(--accent); color: var(--accent); }
.recent-chip.online-chip { border-color: var(--green); color: var(--green); }

/* ══ Devices Table ══ */
.device-controls {
    display: flex; gap: 12px; margin-bottom: 16px;
}
.device-controls input {
    flex: 1; padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px; color: var(--text);
    outline: none;
}
.device-controls input:focus { border-color: var(--accent); }

.btn-refresh, .btn-export {
    padding: 10px 20px;
    border: none; border-radius: 8px;
    font-weight: bold; cursor: pointer;
    transition: all .2s;
}
.btn-refresh { background: var(--accent); color: #080d14; }
.btn-refresh:hover { background: var(--accent2); }
.btn-export  { background: #1a2a3a; color: var(--text); border: 1px solid var(--border2); }
.btn-export:hover  { background: var(--border2); }

.table-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;
    max-height: calc(100vh - 280px);
}

/* Devices tab: let the table fill the available height and scroll internally
   instead of scrolling the whole page after only a few rows. */
#tab-devices {
    height: 100%;
}
#tab-devices.tab-content.active {
    display: flex;
    flex-direction: column;
}
#tab-devices > h1 {
    flex: 0 0 auto;
}
#tab-devices .device-controls {
    flex: 0 0 auto;
}
#tab-devices .table-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
table { width: 100%; border-collapse: collapse; }
thead { background: #162030; position: sticky; top: 0; z-index: 1; }
th {
    padding: 11px 14px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: .5px;
}
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover { color: var(--accent); background: #1a2d40; }
th.sort-asc  { color: var(--accent); }
th.sort-desc { color: var(--accent); }
.sort-icon { font-size: 10px; opacity: 0.5; margin-left: 4px; }
th.sort-asc  .sort-icon { opacity: 1; content: '↑'; }
th.sort-desc .sort-icon { opacity: 1; content: '↓'; }
td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    vertical-align: middle;
}
tr:hover td { background: #12202e; }
.loading-row { text-align: center; color: var(--text-dim); padding: 30px !important; }

.status-online  { color: var(--green); font-weight: 600; }
.status-offline { color: var(--red);   font-weight: 600; }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.status-dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.offline { background: var(--red);   box-shadow: 0 0 6px var(--red); }

.btn-control {
    padding: 4px 12px;
    background: var(--accent); border: none;
    border-radius: 5px; color: #080d14;
    cursor: pointer; font-size: 12px;
    margin-left: 4px;
}
.btn-control:hover { background: var(--accent2); }
.btn-delete {
    padding: 4px 10px;
    background: var(--red); border: none;
    border-radius: 5px; color: #fff;
    cursor: pointer; font-size: 12px;
}
.btn-delete:hover { background: #cc0000; }

/* ══ Control Panel ══ */
.control-panel {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    height: calc(100vh - 140px);
}

.screen-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.screen-header {
    background: #162030;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
}
.screen-btns { display: flex; gap: 8px; }
.screen-btns button {
    padding: 5px 14px;
    background: #1e3045; border: 1px solid var(--border2);
    border-radius: 5px; color: var(--text);
    cursor: pointer; font-size: 12px;
    transition: all .2s;
}
.screen-btns button:hover { background: var(--border2); }
.btn-live.active { background: var(--green) !important; color: #080d14 !important; }

.screen-view {
    flex: 1; background: #000;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    cursor: default;
    outline: none;
    user-select: none;
}
.screen-view:fullscreen,
.screen-view:-webkit-full-screen,
.screen-view:-moz-full-screen {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}
.screen-view:fullscreen #screen-image,
.screen-view:-webkit-full-screen #screen-image,
.screen-view:-moz-full-screen #screen-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.no-screen { color: var(--text-dim); font-size: 15px; }
#screen-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
#screen-canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.cursor-overlay {
    position: absolute;
    pointer-events: none;
    width: 20px;
    height: 20px;
    border: 2px solid #00ff88;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
    mix-blend-mode: difference;
    z-index: 10;
}
.screen-view.mouse-active #cursor-overlay { display: block !important; }

.screen-footer {
    padding: 8px 16px;
    background: #0d1a26;
    border-top: 1px solid var(--border);
    display: flex; gap: 20px; align-items: center;
    font-size: 12px;
}
.screen-footer label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mouse-pos { margin-left: 8px; color: var(--text-dim); font-size: 11px; font-family: monospace; }

/* Stealth controls - red */
.stealth-label {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; color: #ff4444;
    font-size: 12px; font-weight: 600;
}
.stealth-check { accent-color: #ff2222; cursor: pointer; }
.stealth-label:has(.stealth-check:checked) {
    color: #ff0000;
    text-shadow: 0 0 8px #ff000066;
}

/* Update Display Status */
.update-display-status {
    padding: 6px 16px;
    background: rgba(255, 50, 50, 0.15);
    border-top: 1px solid rgba(255, 50, 50, 0.4);
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    color: #ff4444;
    animation: ud-pulse 2s ease-in-out infinite;
}
.ud-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff4444;
    display: inline-block;
    animation: ud-blink 1s ease-in-out infinite;
}
@keyframes ud-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes ud-pulse {
    0%, 100% { background: rgba(255, 50, 50, 0.15); }
    50% { background: rgba(255, 50, 50, 0.25); }
}
.btn-power.active-red {
    background: #ff4444 !important;
    color: #fff !important;
    border-color: #ff4444 !important;
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.5);
}

/* Control Side */
.control-side {
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
}
.control-side > div {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
.control-side h4 { color: var(--text-dim); font-size: 12px; margin-bottom: 10px; text-transform: uppercase; }

.quick-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.quick-grid button {
    padding: 7px; background: #162030;
    border: 1px solid var(--border2);
    border-radius: 5px; color: var(--text);
    cursor: pointer; font-size: 11px;
    transition: all .2s;
}
.quick-grid button:hover { background: var(--border2); color: var(--accent); }

.cmd-input-row { display: flex; gap: 8px; margin-bottom: 10px; }
.cmd-input-row input {
    flex: 1; padding: 9px 12px;
    background: #1a2a3a; border: 1px solid var(--border2);
    border-radius: 6px; color: var(--text);
    outline: none; font-size: 13px;
}
.cmd-input-row input:focus { border-color: var(--accent); }
.btn-send {
    padding: 9px 16px;
    background: var(--accent); border: none;
    border-radius: 6px; color: #080d14;
    font-weight: bold; cursor: pointer;
}

.command-output {
    background: #0a1520;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    min-height: 80px; max-height: 160px;
    overflow-y: auto;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: var(--green);
    white-space: pre-wrap;
    word-break: break-all;
}

.power-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.power-box h4 { flex: 0 0 100%; }
.btn-power {
    padding: 7px 14px;
    background: #1e3045; border: 1px solid var(--border2);
    border-radius: 6px; color: var(--text);
    cursor: pointer; font-size: 12px;
    transition: all .2s;
}
.btn-power:hover { background: var(--border2); }
.btn-power.red    { border-color: var(--red);    color: var(--red);    }
.btn-power.orange { border-color: var(--orange); color: var(--orange); }
.btn-power.blue   { border-color: var(--accent); color: var(--accent); }
.btn-power.red:hover    { background: var(--red);    color: #fff; }
.btn-power.orange:hover { background: var(--orange); color: #080d14; }
.btn-power.blue:hover   { background: var(--accent); color: #080d14; }

.sysinfo-box { font-size: 12px; }
.sysinfo-box h4 { margin-bottom: 10px; }
.sysinfo-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.sysinfo-row:last-child { border-bottom: none; }
.sysinfo-key   { color: var(--text-dim); }
.sysinfo-value { color: var(--accent); font-family: monospace; }

/* ══ Terminal ══ */
.shell-device-select {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.shell-device-select select {
    padding: 8px 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text);
    outline: none;
}

.shell-category-select {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.shell-category-select select {
    padding: 8px 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text);
    outline: none;
}

.shell-shortcuts {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
}
.btn-shell-cmd {
    padding: 7px 14px;
    background: var(--card); border: 1px solid var(--border2);
    border-radius: 6px; color: var(--accent);
    font-family: monospace; font-size: 12px;
    cursor: pointer; transition: all .15s;
}
.btn-shell-cmd:hover {
    background: var(--accent); color: #07101c;
    border-color: var(--accent);
}

/* ══ Custom Dropdown (flag images) ══ */
.cdd-wrap { position: relative; display: inline-block; vertical-align: middle; }
.cdd-btn {
    padding: 8px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    min-width: 230px;
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.cdd-btn:hover { border-color: var(--border2); }
.cdd-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1500;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    padding: 4px;
}
.cdd-item {
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text);
}
.cdd-item:hover { background: var(--border2); }
.cdd-item.selected { background: var(--accent); color: #080d14; }
.cdd-item .fi, .cdd-btn .fi { margin-right: 6px; vertical-align: -2px; }

.terminal {
    background: #04080f;
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    padding: 16px;
    height: calc(100vh - 280px);
    overflow-y: auto;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
}
.terminal-line        { padding: 2px 0; color: var(--text); word-break: break-all; white-space: pre-wrap; }
.terminal-line.cmd    { color: var(--accent); }
.terminal-line.result { color: var(--green); }
.terminal-line.error  { color: var(--red); }
.terminal-line.info   { color: var(--text-dim); }

.terminal-input-row {
    display: flex; align-items: center;
    background: #04080f;
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 16px;
}
.prompt { color: var(--green); font-family: monospace; margin-right: 10px; white-space: nowrap; }
.terminal-input {
    flex: 1; background: transparent;
    border: none; color: var(--text);
    font-family: 'Consolas', monospace;
    font-size: 13px; outline: none;
}

.btn-clear {
    padding: 7px 14px;
    background: #1a2a3a; border: 1px solid var(--border2);
    border-radius: 6px; color: var(--text-dim);
    cursor: pointer; font-size: 12px;
}
.btn-clear:hover { background: var(--red); color: #fff; }

/* ══ Files ══ */
.files-device-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.files-device-row select {
    padding: 8px 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); outline: none;
}
.files-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.file-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.file-card h4 { color: var(--text-dim); font-size: 12px; margin-bottom: 14px; text-transform: uppercase; }
.file-card input[type="text"],
.file-card input[type="file"] {
    display: block; width: 100%;
    padding: 9px 12px; margin-bottom: 10px;
    background: #1a2a3a; border: 1px solid var(--border2);
    border-radius: 6px; color: var(--text);
    outline: none; font-size: 13px;
}

.btn-upload, .btn-download {
    padding: 9px 20px;
    border: none; border-radius: 6px;
    font-weight: bold; cursor: pointer;
    font-size: 13px; transition: all .2s;
}
.btn-upload   { background: var(--accent); color: #080d14; }
.btn-download { background: var(--green);  color: #080d14; }
.btn-upload:hover   { background: var(--accent2); }
.btn-download:hover { background: #00cc66; }

.downloaded-files {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.downloaded-files h4 { margin-bottom: 14px; color: var(--text-dim); font-size: 12px; text-transform: uppercase; }
.file-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.file-item:last-child { border-bottom: none; }
.file-item a { color: var(--accent); text-decoration: none; }
.file-item a:hover { text-decoration: underline; }

/* ══ Logs ══ */
.logs-controls {
    display: flex; gap: 10px; margin-bottom: 14px; align-items: center;
}
.logs-controls select {
    padding: 8px 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); outline: none;
}

.logs-container {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
    max-height: calc(100vh - 220px); overflow-y: auto;
    font-family: 'Consolas', monospace; font-size: 12px;
}
.log-entry {
    padding: 5px 8px; border-bottom: 1px solid var(--border);
    display: flex; gap: 12px; align-items: flex-start;
}
.log-entry:last-child { border-bottom: none; }
.log-time    { color: var(--text-dim); white-space: nowrap; }
.log-level   { width: 55px; font-weight: bold; }
.log-level.info    { color: var(--accent); }
.log-level.warning { color: var(--orange); }
.log-level.error   { color: var(--red);    }
.log-msg { flex: 1; color: var(--text); }

/* ══ Settings ══ */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.setting-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px;
}
.setting-card h3 { color: var(--accent); margin-bottom: 16px; font-size: 15px; }
.setting-card input {
    display: block; width: 100%;
    padding: 9px 12px; margin-bottom: 10px;
    background: #1a2a3a; border: 1px solid var(--border2);
    border-radius: 6px; color: var(--text);
    outline: none;
}
.setting-card button {
    padding: 9px 24px;
    background: var(--accent); border: none;
    border-radius: 6px; color: #080d14;
    font-weight: bold; cursor: pointer;
}
.btn-backup {
    padding: 9px 20px;
    background: #1a2a3a; border: 1px solid var(--border2);
    border-radius: 6px; color: var(--text);
    cursor: pointer; font-size: 13px;
}
.server-info-list > div { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }

/* ══ Notifications ══ */
.notification {
    position: fixed; bottom: 20px; right: 20px;
    background: var(--card);
    border-left: 4px solid var(--accent);
    padding: 12px 20px; border-radius: 8px;
    color: var(--text); font-size: 13px;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
    z-index: 9000;
    animation: slideIn .3s ease;
    max-width: 320px;
}
.notification.success { border-left-color: var(--green); }
.notification.error   { border-left-color: var(--red);   }
.notification.warning { border-left-color: var(--orange); }

@keyframes slideIn {
    from { transform: translateX(80px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ══ Scrollbar ══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #345; }

/* ══ Responsive ══ */
@media (max-width: 1300px) {
    .stats-grid       { grid-template-columns: repeat(2, 1fr); }
    .control-panel    { grid-template-columns: 1fr; }
    .settings-grid    { grid-template-columns: 1fr; }
    .files-grid       { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sidebar { width: 56px; }
    .nav-label, .logo h2, .status-text, .sidebar-footer > div:first-child { display: none; }
    .main-content { padding: 16px; }
}

/* ══ File Browser ══ */
.browser-header {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 10px 14px;
}
.browser-list {
    background: var(--card);
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 320px; overflow-y: auto;
}
.browser-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer; font-size: 13px;
    transition: background .15s;
}
.browser-item:last-child { border-bottom: none; }
.browser-item:hover { background: #12202e; }
.browser-item .bi-icon { font-size: 16px; flex-shrink: 0; width: 20px; }
.browser-item .bi-name { flex: 1; font-family: monospace; color: var(--text); }
.browser-item .bi-size { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.browser-item .bi-dl,
.browser-item .bi-download,
.browser-item .bi-exec {
    padding: 3px 10px; border: none;
    border-radius: 4px; font-size: 11px;
    cursor: pointer; opacity: 0;
    transition: opacity .15s;
}
.browser-item .bi-download { background: var(--green); color: #080d14; }
.browser-item .bi-exec     { background: var(--red);   color: #fff; }
.browser-item:hover .bi-dl,
.browser-item:hover .bi-download,
.browser-item:hover .bi-exec { opacity: 1; }

/* ══ Drive Cards ══ */
.drive-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    width: 160px;
    cursor: pointer;
    transition: border .2s, background .2s;
    text-align: center;
}
.drive-card:hover { border-color: var(--accent); background: #12202e; }
.drive-card .drive-icon { font-size: 32px; margin-bottom: 8px; }
.drive-card .drive-name { font-size: 15px; font-weight: 600; color: var(--accent); font-family: monospace; }
.drive-card .drive-label { font-size: 11px; color: var(--text-dim); margin: 3px 0; }
.drive-card .drive-bar-bg {
    width: 100%; height: 5px;
    background: var(--border2); border-radius: 3px;
    margin-top: 8px;
}
.drive-card .drive-bar-fill {
    height: 5px; border-radius: 3px;
    background: var(--accent);
    transition: width .3s;
}
.drive-card .drive-bar-fill.warn { background: var(--orange); }
.drive-card .drive-bar-fill.danger { background: var(--red); }
.drive-card .drive-size { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ══ Live Watch ══ */
.livewatch-panel { display: flex; flex-direction: column; gap: 16px; height: calc(100vh - 140px); }
.livewatch-device-row { display:flex; align-items:center; gap:12px; }
.livewatch-device-row select { padding:8px 12px; background:var(--card); border:1px solid var(--border); border-radius:6px; color:var(--text); outline:none; }

.livewatch-grid { display:grid; grid-template-columns:200px 1fr 220px; gap:16px; flex:1; overflow:hidden; }

.lw-tools { display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.lw-section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.lw-section h4 { font-size:11px; color:var(--text-dim); text-transform:uppercase; margin-bottom:8px; }
.lw-btn { display:block; width:100%; padding:7px; border:none; border-radius:5px; cursor:pointer; font-size:12px; margin-bottom:4px; transition:all .2s; }
.lw-btn.start  { background:#00aa44; color:#fff; }
.lw-btn.stop   { background:var(--red); color:#fff; }
.lw-btn.action { background:#1e3045; border:1px solid var(--border2); color:var(--text); }
.lw-btn:hover  { opacity:.85; }
.lw-btn.active { background:var(--green); color:#080d14; }

.lw-output-area { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.lw-output-header { padding:10px 14px; background:#162030; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.lw-output-content { flex:1; overflow-y:auto; padding:12px; font-family:Consolas,monospace; font-size:12px; }
.lw-placeholder { color:var(--text-dim); text-align:center; padding:40px; }

.lw-output-item { margin-bottom:14px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.lw-output-item:last-child { border-bottom:none; }
.lw-output-item .lw-item-header { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.lw-output-item .lw-item-type { color:var(--accent); font-weight:bold; }
.lw-output-item pre { white-space:pre-wrap; word-break:break-all; color:var(--green); background:#0a1520; padding:8px; border-radius:4px; font-size:11px; max-height:200px; overflow-y:auto; }
.lw-output-item img { max-width:100%; border-radius:4px; cursor:pointer; }

.lw-files { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.lw-files-header { padding:10px 14px; background:#162030; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.lw-files-list { flex:1; overflow-y:auto; padding:8px; }
.lw-file-item { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid var(--border); font-size:12px; }
.lw-file-item:last-child { border-bottom:none; }
.lw-file-item a { color:var(--accent); text-decoration:none; flex:1; }
.lw-file-item a:hover { text-decoration:underline; }
.lw-file-item .lw-file-size { color:var(--text-dim); font-size:11px; }

/* ══ Custom Red Cursor for mouse control ══ */
.screen-view.mouse-active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L0 16 L4 12 L7 18 L9 17 L6 11 L12 11 Z' fill='%23ff2222' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 0 0, crosshair;
}

/* ══ Security tab ══ */
.security-panel { display:flex; flex-direction:column; gap:14px; }
.security-desc { color:var(--text-dim); font-size:13px; padding:10px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }

/* Target type picker */
.sec-type-row { display:flex; flex-wrap:wrap; gap:10px; }
.sec-type-btn {
    flex:1; min-width:120px; padding:12px 10px; border:1px solid var(--border2); border-radius:var(--radius);
    background:var(--card); color:var(--text); font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s;
}
.sec-type-btn:hover { border-color:var(--accent); }
.sec-type-btn.active { background:var(--accent); color:#080d14; border-color:var(--accent); }

.sec-selected-path { padding:10px 14px; background:var(--card); border:1px dashed var(--border2); border-radius:var(--radius); font-size:13px; }

/* Browse + pick */
.sec-pick-hint { margin-top:8px; font-size:11px; color:var(--accent); text-align:center; }

/* Action row */
.security-action-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:6px; }
.sec-pass-field { flex:1 1 200px; display:flex; flex-direction:column; gap:5px; }
.sec-pass-field label { font-size:12px; color:var(--text-dim); }
.sec-pass-field input {
    background:#0a1520; border:1px solid var(--border2); color:var(--text);
    padding:10px; border-radius:5px; font-size:13px; box-sizing:border-box; outline:none;
}
.sec-pass-field input:focus { border-color:var(--accent); }

.sec-btn { display:block; width:100%; padding:10px; border:none; border-radius:5px; cursor:pointer; font-size:13px; font-weight:bold; transition:all .2s; margin-top:4px; }
.sec-btn.encrypt { background:var(--green); color:#080d14; }
.sec-btn.decrypt { background:var(--accent); color:#080d14; }
.sec-btn:hover { opacity:.85; }
.sec-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Key management table */
.sec-keys-table-wrap { overflow-x:auto; margin-top:10px; }
.sec-keys-table { width:100%; border-collapse:collapse; font-size:12px; }
.sec-keys-table th, .sec-keys-table td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
.sec-keys-table th { color:var(--text-dim); font-size:11px; text-transform:uppercase; background:rgba(255,255,255,.03); }
.sec-keys-table td code { background:#0a1520; border:1px solid var(--border2); padding:2px 6px; border-radius:4px; }
.sec-keys-table tr:hover td { background:rgba(255,255,255,.02); }

@media (max-width: 900px) {
    .sec-type-btn { min-width:90px; }
    .security-action-row { flex-direction:column; align-items:stretch; }
}

/* -- Crypto live progress -- */
.crypto-progress-card {
    margin-top: 16px;
    background: #0e1722;
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.crypto-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.crypto-progress-pct {
    font-family: monospace;
    font-size: 15px;
    color: var(--accent);
}
.crypto-progress-bar-wrap {
    width: 100%;
    height: 14px;
    background: #0a0f16;
    border: 1px solid var(--border2);
    border-radius: 8px;
    overflow: hidden;
}
.crypto-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2e86de, #54a0ff);
    transition: width .25s ease;
}
.crypto-progress-card.decrypt .crypto-progress-bar {
    background: linear-gradient(90deg, #e67e22, #f6b93b);
}
.crypto-progress-card.done .crypto-progress-bar {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
}
.crypto-progress-status {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
    font-family: monospace;
}
.crypto-progress-card.done {
    border-color: #27ae60;
}
.crypto-progress-card.done .crypto-progress-status { color: #2ecc71; }


/* ══ Security panel redesign ══ */
.sec-section { margin-top:16px; background:#0e1722; border:1px solid var(--border2); border-radius:12px; padding:16px 18px; }
.sec-section-title { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; font-weight:700; }
.sec-status-badge { margin-left:12px; font-size:12px; padding:2px 10px; border-radius:20px; background:#1a2a3a; color:var(--text-dim); border:1px solid var(--border2); }

.status-badge { display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px; border:1px solid var(--border2); background:#16202c; color:var(--text-dim); }
.status-badge.online { background:rgba(46,204,113,.15); color:var(--green); border-color:var(--green); }
.status-badge.offline { background:rgba(231,76,60,.15); color:var(--red); border-color:var(--red); }
.status-badge.reconnecting { background:rgba(241,196,15,.15); color:#f1c40f; border-color:#f1c40f; }
.sec-type-row { display:flex; gap:8px; flex-wrap:wrap; }
.sec-type-btn { flex:1; min-width:110px; padding:10px 12px; background:#0a0f16; color:var(--text-dim); border:1px solid var(--border2); border-radius:8px; cursor:pointer; font-size:13px; transition:all .15s; }
.sec-type-btn:hover { color:var(--text); border-color:var(--accent); }
.sec-type-btn.active { background:var(--accent); color:#06121e; border-color:var(--accent); font-weight:700; }
.sec-selected-path { margin-top:10px; font-size:13px; }
.sec-selected-path .lbl { color:var(--text-dim); }
.sec-selected-path .val { color:var(--accent); font-family:monospace; }
.sec-selected-path .note { color:var(--text-dim); font-size:12px; margin-left:6px; }
.sec-sub { margin-bottom:8px; color:var(--text-dim); font-size:12px; }
.sec-drives-list { display:flex; flex-wrap:wrap; gap:10px; }
.browser-path { margin:0 12px; color:var(--accent); font-family:monospace; flex:0 0 auto; }
.browser-input { flex:1; padding:6px 10px; background:#1a2a3a; border:1px solid var(--border2); border-radius:6px; color:var(--text); outline:none; }
.browser-empty { color:var(--text-dim); padding:20px; text-align:center; }
.security-action-row { display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; margin-top:4px; }
.sec-pass-field { flex:1 1 320px; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; }
.sec-pass-field label { font-size:12px; color:var(--text-dim); font-weight:600; }
.sec-pass-field input { padding:13px 14px; background:#1a2a3a; border:1px solid var(--border2); border-radius:9px; color:var(--text); outline:none; font-size:14px; }
.sec-pass-field input:focus { border-color:var(--accent); }
.sec-actions { display:flex; gap:14px; flex:1 1 360px; }
.sec-btn { flex:1; padding:16px 18px; border:none; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; transition:all .15s; color:#06121e; }
.sec-btn.encrypt { background:linear-gradient(135deg,#27ae60,#2ecc71); }
.sec-btn.decrypt { background:linear-gradient(135deg,#e67e22,#f6b93b); }
.sec-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.sec-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }