detecti-cli 2.0.0__py3-none-any.whl

detecti/web/static/css/dashboard.css

@@ -0,0 +1,3802 @@
+/* ==========================================================================
+   DetecTI-CLI — EASM & Threat Intelligence Dashboard Stylesheet
+   Aligned with DetecTI Security Official Website Design System & Visual Identity
+   ========================================================================== */
+
+:root {
+    /* Color Palette */
+    --bg-primary: #0D0E12;
+    --bg-secondary: #14151D;
+    --bg-card: #191B26;
+    --bg-card-hover: #1F2230;
+    --bg-header: rgba(13, 14, 18, 0.88);
+    
+    /* Core Brand Accents */
+    --purple-electric: #8C52FF;
+    --purple-primary: #7C3AED;
+    --purple-light: #a78bfa;
+    --purple-glow: rgba(140, 82, 255, 0.28);
+    --purple-glow-intense: rgba(140, 82, 255, 0.5);
+    --navy-deep: #0C184B;
+    --cyan-accent: #00e5ff;
+    --cyan-glow: rgba(0, 229, 255, 0.25);
+    
+    /* Text Colors */
+    --text-primary: #F3F4F6;
+    --text-secondary: #9CA3AF;
+    --text-muted: #6B7280;
+    --text-white: #FFFFFF;
+    
+    /* Borders & Glassmorphism */
+    --border-color: rgba(140, 82, 255, 0.18);
+    --border-hover: rgba(140, 82, 255, 0.45);
+    --border-cyan: rgba(0, 229, 255, 0.3);
+    --border-card: rgba(140, 82, 255, 0.14);
+    
+    /* Code & Data */
+    --code-bg: #090A0D;
+    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace, Consolas, Courier;
+    
+    /* Risk Levels */
+    --risk-critical: #dc143c;
+    --risk-high: #ff6b6b;
+    --risk-medium: #ffa502;
+    --risk-low: #2ed573;
+}
+
+/* Reset & Global */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(140, 82, 255, 0.3) transparent;
+}
+
+/* Custom Scrollbars (WebKit & Chromium) */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(140, 82, 255, 0.25);
+    border-radius: 9999px;
+    transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--purple-electric);
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    font-family: var(--font-main);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    overflow: hidden;
+    touch-action: manipulation;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.dashboard-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+    width: 100vw;
+    overflow: hidden;
+    position: relative;
+    background: var(--bg-primary);
+}
+
+/* ==========================================================================
+   Header & Navigation
+   ========================================================================== */
+
+.dashboard-header {
+    background: var(--bg-header);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(140, 82, 255, 0.08);
+    position: relative;
+    z-index: 100;
+    flex-shrink: 0;
+}
+
+.header-accent-bar {
+    height: 3px;
+    width: 100%;
+    background: linear-gradient(90deg, #8C52FF 0%, #0C184B 50%, #00e5ff 100%);
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    gap: 1rem;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    min-width: 0;
+}
+
+.sidebar-toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--purple-light);
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    touch-action: manipulation;
+}
+
+.sidebar-toggle-btn:hover, .sidebar-toggle-btn:active {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    color: var(--text-white);
+    box-shadow: 0 0 14px var(--purple-glow-intense);
+    transform: translateY(-1px);
+}
+
+/* Lucide Icon Helpers */
+.ui-icon {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2px;
+    vertical-align: middle;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.sidebar-toggle-btn .ui-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.label-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 2px;
+    color: var(--purple-light);
+}
+
+.panel-title-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    color: var(--purple-electric);
+    vertical-align: -2px;
+}
+
+.search-lead-icon {
+    position: absolute;
+    left: 0.85rem;
+    width: 16px;
+    height: 16px;
+    color: var(--text-muted);
+    pointer-events: none;
+}
+
+.header-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+    text-decoration: none;
+    cursor: pointer;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.header-brand:hover {
+    opacity: 0.95;
+}
+
+.brand-logo {
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+    transition: all 0.25s ease;
+}
+
+.header-brand:hover .brand-logo {
+    transform: scale(1.06);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 12px var(--purple-glow);
+}
+
+.brand-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+    line-height: 1.15;
+}
+
+.brand-title {
+    color: var(--text-white);
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+    line-height: 1.15;
+    letter-spacing: -0.3px;
+    white-space: nowrap;
+}
+
+.ti-highlight {
+    color: var(--purple-electric);
+    font-weight: 800;
+}
+
+.brand-subtitle {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.header-docs-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    background: rgba(0, 229, 255, 0.08);
+    border: 1px solid rgba(0, 229, 255, 0.28);
+    color: var(--cyan-accent);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    margin-left: 0.5rem;
+    flex-shrink: 0;
+}
+
+.header-docs-icon-btn .ui-icon {
+    width: 17px;
+    height: 17px;
+    stroke-width: 2.2px;
+}
+
+.header-docs-icon-btn:hover {
+    background: rgba(0, 229, 255, 0.22);
+    border-color: var(--cyan-accent);
+    color: #fff;
+    box-shadow: 0 0 14px var(--cyan-glow);
+    transform: translateY(-1px);
+}
+
+/* Header Right Controls */
+.header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    gap: 1.25rem;
+}
+
+.header-control-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.control-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.control-label:hover {
+    color: var(--cyan-accent);
+}
+
+.control-label .label-icon {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2.2px;
+}
+
+.db-select-input {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 0.45rem 0.85rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    font-family: var(--font-mono);
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s ease;
+    max-width: 220px;
+    text-overflow: ellipsis;
+}
+
+.db-select-input:hover, .db-select-input:focus {
+    background: var(--bg-card-hover);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 12px var(--purple-glow);
+}
+
+.db-select-input option {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+/* Database Selector Dropdown */
+.db-dropdown-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.action-btn.db-trigger-btn {
+    background: linear-gradient(135deg, #0a1128 0%, var(--bg-card) 100%);
+    border: 1px solid var(--border-color);
+    color: var(--text-white);
+    padding: 0.45rem 0.9rem;
+    border-radius: 8px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    max-width: 240px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.action-btn.db-trigger-btn:hover {
+    background: var(--bg-card-hover);
+    border-color: var(--cyan-accent);
+    color: var(--text-white);
+    box-shadow: 0 0 16px var(--cyan-glow);
+    transform: translateY(-1px);
+}
+
+.db-icon-main {
+    width: 15px;
+    height: 15px;
+    color: var(--cyan-accent);
+    flex-shrink: 0;
+}
+
+.current-db-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.8rem;
+    color: var(--cyan-accent);
+    letter-spacing: 0.02em;
+}
+
+.db-dropdown-wrapper.active .dropdown-chevron {
+    transform: rotate(180deg);
+}
+
+.db-dropdown-menu {
+    display: none;
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-top: 2px solid var(--cyan-accent);
+    border-radius: 10px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 24px var(--cyan-glow);
+    min-width: 280px;
+    max-width: 360px;
+    z-index: 1050;
+    padding: 0.45rem;
+    backdrop-filter: blur(16px);
+}
+
+.db-dropdown-wrapper.active .db-dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    animation: fadeInDropdown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.db-dropdown-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.6rem 0.45rem 0.6rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+}
+
+.db-count-badge {
+    background: rgba(0, 240, 255, 0.15);
+    color: var(--cyan-accent);
+    border: 1px solid rgba(0, 240, 255, 0.3);
+    font-size: 0.68rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 10px;
+    font-family: var(--font-mono, monospace);
+}
+
+.db-dropdown-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-height: 280px;
+    overflow-y: auto;
+    padding-right: 2px;
+}
+
+.db-dropdown-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.db-dropdown-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+}
+
+.db-dropdown-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.45rem 0.6rem;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid transparent;
+    transition: all 0.15s ease;
+}
+
+.db-dropdown-item:hover {
+    background: var(--bg-card-hover);
+    border-color: rgba(0, 240, 255, 0.25);
+    box-shadow: 0 0 10px var(--cyan-glow);
+}
+
+.db-dropdown-item.is-active {
+    background: rgba(0, 240, 255, 0.09);
+    border-color: rgba(0, 240, 255, 0.45);
+}
+
+.db-item-main {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex: 1;
+    min-width: 0;
+    cursor: pointer;
+    text-align: left;
+    background: none;
+    border: none;
+    padding: 0;
+}
+
+.db-item-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+    transition: color 0.15s ease;
+}
+
+.db-dropdown-item.is-active .db-item-icon,
+.db-dropdown-item:hover .db-item-icon {
+    color: var(--cyan-accent);
+}
+
+.db-item-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.25;
+}
+
+.db-item-name {
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.db-dropdown-item.is-active .db-item-name {
+    color: var(--cyan-accent);
+    font-weight: 700;
+}
+
+.db-item-meta {
+    font-size: 0.68rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono, monospace);
+}
+
+.btn-delete-db {
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-muted);
+    padding: 0.35rem 0.4rem;
+    border-radius: 6px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+}
+
+.btn-delete-db:hover {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.4);
+    color: #ef4444;
+    transform: scale(1.05);
+    box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
+}
+
+/* Generic Confirmation Modal Styles */
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(5, 8, 22, 0.85);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 2500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    animation: fadeInModal 0.2s ease-out;
+}
+
+@keyframes fadeInModal {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.modal-dialog {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-top: 3px solid #ef4444;
+    border-radius: 12px;
+    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 32px rgba(239, 68, 68, 0.2);
+    width: 100%;
+    max-width: 440px;
+    display: flex;
+    flex-direction: column;
+    animation: scaleInModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes scaleInModal {
+    from { transform: scale(0.94); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.modal-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.modal-title-row h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text-white);
+}
+
+.modal-danger-icon {
+    width: 20px;
+    height: 20px;
+}
+
+.modal-close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s ease;
+}
+
+.modal-close-btn:hover {
+    color: var(--text-white);
+}
+
+.modal-body {
+    padding: 1.25rem;
+    color: var(--text-primary);
+    font-size: 0.88rem;
+    line-height: 1.5;
+}
+
+.modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 0.9rem 1.25rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 0 0 12px 12px;
+}
+
+.modal-cancel-btn {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 0.45rem 1rem;
+    border-radius: 6px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.modal-cancel-btn:hover {
+    background: rgba(255, 255, 255, 0.12);
+    color: var(--text-white);
+}
+
+.modal-danger-btn {
+    background: #dc2626;
+    border: 1px solid #ef4444;
+    color: #fff;
+    padding: 0.45rem 1.1rem;
+    border-radius: 6px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    transition: all 0.15s ease;
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
+}
+
+.modal-danger-btn:hover {
+    background: #b91c1c;
+    border-color: #f87171;
+    box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
+    transform: translateY(-1px);
+}
+
+/* Toast Notification System */
+.toast-container {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    z-index: 3000;
+    pointer-events: none;
+    max-width: 380px;
+}
+
+.toast-notification {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    padding: 0.7rem 0.95rem;
+    border-radius: 8px;
+    background: rgba(13, 17, 38, 0.95);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 240, 255, 0.15);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: var(--text-primary);
+    font-size: 0.82rem;
+    font-weight: 500;
+    animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: all 0.25s ease;
+}
+
+.toast-notification.fade-out {
+    opacity: 0;
+    transform: translateX(20px) scale(0.95);
+}
+
+@keyframes toastSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(12px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.toast-icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.toast-message {
+    flex: 1;
+    line-height: 1.35;
+}
+
+.toast-close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.2rem;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s ease;
+}
+
+.toast-close-btn:hover {
+    color: var(--text-white);
+}
+
+.toast-success {
+    border-left: 3px solid #10b981;
+}
+.toast-success .toast-icon {
+    color: #10b981;
+}
+
+.toast-error {
+    border-left: 3px solid #ef4444;
+}
+.toast-error .toast-icon {
+    color: #ef4444;
+}
+
+.toast-warning {
+    border-left: 3px solid #f59e0b;
+}
+.toast-warning .toast-icon {
+    color: #f59e0b;
+}
+
+.toast-info {
+    border-left: 3px solid var(--cyan-accent);
+}
+.toast-info .toast-icon {
+    color: var(--cyan-accent);
+}
+
+/* Export Dropdown Menu */
+.export-dropdown-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.export-trigger-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.dropdown-chevron {
+    font-size: 0.65rem;
+    color: var(--text-secondary);
+    transition: transform 0.2s ease;
+}
+
+.export-dropdown-wrapper.active .dropdown-chevron {
+    transform: rotate(180deg);
+}
+
+.action-btn.export-btn {
+    background: linear-gradient(135deg, #0C184B 0%, var(--bg-card) 100%);
+    border: 1px solid var(--border-color);
+    color: var(--text-white);
+    padding: 0.45rem 0.95rem;
+    border-radius: 8px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    text-decoration: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.action-btn.export-btn:hover {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    color: var(--text-white);
+    box-shadow: 0 0 16px var(--purple-glow-intense);
+    transform: translateY(-1px);
+}
+
+.action-btn.export-btn:hover .dropdown-chevron {
+    color: var(--text-white);
+}
+
+.action-btn.export-btn:active {
+    transform: scale(0.97);
+}
+
+.export-dropdown-menu {
+    display: none;
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-top: 2px solid var(--purple-electric);
+    border-radius: 10px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px var(--purple-glow);
+    min-width: 230px;
+    z-index: 1000;
+    padding: 0.45rem;
+    backdrop-filter: blur(14px);
+}
+
+.export-dropdown-wrapper.active .export-dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    animation: fadeInDropdown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes fadeInDropdown {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.export-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: transparent;
+    border: none;
+    padding: 0.6rem 0.8rem;
+    border-radius: 8px;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    transition: all 0.15s ease;
+}
+
+.export-dropdown-item:hover {
+    background: var(--bg-card-hover);
+    box-shadow: 0 0 10px var(--purple-glow);
+}
+
+.export-item-icon {
+    width: 20px;
+    height: 20px;
+    color: var(--purple-electric);
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+}
+
+.export-dropdown-item:hover .export-item-icon {
+    color: var(--cyan-accent);
+    filter: drop-shadow(0 0 6px var(--cyan-glow));
+    transform: scale(1.08);
+}
+
+.export-item-text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.25;
+}
+
+.export-item-title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.export-dropdown-item:hover .export-item-title {
+    color: var(--text-white);
+}
+
+.export-item-desc {
+    font-size: 0.72rem;
+    color: var(--text-secondary);
+}
+
+.target-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    max-width: 250px;
+    overflow: hidden;
+}
+
+#target-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-white);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.db-info {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+/* ==========================================================================
+   Main Layout & Sidebar
+   ========================================================================= */
+
+.dashboard-main {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+/* Drawer Backdrops */
+.drawer-backdrop {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 998;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+}
+
+.drawer-backdrop.active {
+    display: block;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 325px;
+    height: 100%;
+    max-height: 100%;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    padding: 1.1rem 1rem 2.5rem 1rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 0.95rem;
+    flex-shrink: 0;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(140, 82, 255, 0.25) transparent;
+    z-index: 50;
+    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar.collapsed {
+    margin-left: -325px;
+}
+
+.sidebar-mobile-header {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-mobile-title {
+    font-weight: 700;
+    color: var(--text-white);
+    font-size: 1rem;
+}
+
+.sidebar-close-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.sidebar-close-btn:hover {
+    background: var(--risk-critical);
+    border-color: var(--risk-critical);
+    color: #fff;
+}
+
+/* Panels */
+.panel {
+    background: var(--bg-card);
+    border: 1px solid var(--border-card);
+    border-radius: 12px;
+    padding: 1.15rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    transition: border-color 0.2s ease;
+}
+
+.panel:hover {
+    border-color: var(--border-color);
+}
+
+.panel h3 {
+    color: var(--text-white);
+    margin-bottom: 0.85rem;
+    font-size: 0.92rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.45rem;
+    letter-spacing: 0.3px;
+    display: flex;
+    align-items: center;
+}
+
+/* Metrics Panel: Organized in 2-Column Pairs */
+.metric-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.6rem;
+}
+
+.metric-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.65rem 0.5rem;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--border-card);
+    transition: all 0.25s ease;
+    min-height: 64px;
+}
+
+.metric-item:hover {
+    border-color: var(--purple-electric);
+    box-shadow: 0 4px 14px var(--purple-glow);
+    transform: translateY(-2px);
+}
+
+.metric-item.critical {
+    border-color: rgba(220, 20, 60, 0.3);
+}
+
+.metric-item.critical:hover {
+    border-color: var(--risk-critical);
+    box-shadow: 0 4px 14px rgba(220, 20, 60, 0.35);
+}
+
+.metric-item.verified-highlight {
+    border-color: rgba(34, 197, 94, 0.3);
+}
+
+.metric-item.verified-highlight:hover {
+    border-color: #22c55e;
+    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
+}
+
+.metric-item.epss-highlight {
+    border-color: rgba(245, 158, 11, 0.3);
+}
+
+.metric-item.epss-highlight:hover {
+    border-color: #f59e0b;
+    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
+}
+
+.metric-value {
+    font-family: var(--font-mono);
+    font-size: 1.22rem;
+    font-weight: 700;
+    color: var(--cyan-accent);
+    line-height: 1.2;
+}
+
+.metric-item.verified-highlight .metric-value {
+    color: #4ade80;
+}
+
+.metric-item.epss-highlight .metric-value {
+    color: #fbbf24;
+}
+
+.metric-item.critical .metric-value {
+    color: var(--risk-critical);
+}
+
+.metric-label {
+    font-size: 0.65rem;
+    color: var(--text-secondary);
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    line-height: 1.15;
+    margin-top: 0.25rem;
+}
+
+/* Search Panel */
+.panel.search-panel {
+    padding: 0.75rem;
+}
+
+.search-group {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 0;
+}
+
+.search-input {
+    width: 100%;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 0.65rem 0.85rem 0.65rem 2.35rem;
+    padding-right: 2.5rem;
+    border-radius: 10px;
+    font-size: 0.85rem;
+    font-family: var(--font-main);
+    transition: all 0.2s ease;
+}
+
+.search-input::placeholder {
+    color: var(--text-muted);
+    font-size: 0.82rem;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 0 2px var(--purple-glow);
+}
+
+.clear-btn {
+    position: absolute;
+    right: 0.625rem;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 0.25rem;
+    cursor: pointer;
+    font-size: 1.2rem;
+    line-height: 1;
+    transition: color 0.2s ease;
+}
+
+.clear-btn:hover {
+    color: var(--text-white);
+}
+
+.search-input:placeholder-shown + .clear-btn {
+    display: none;
+}
+
+/* Accordion Panels (Lead Selector & Filters) */
+.panel.filters-accordion-panel,
+.panel.lead-accordion-panel {
+    padding: 0;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.sidebar-accordion,
+.filters-accordion {
+    width: 100%;
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1.1rem;
+    cursor: pointer;
+    user-select: none;
+    background: var(--bg-card);
+    transition: background 0.2s ease;
+    list-style: none;
+}
+
+.accordion-header::-webkit-details-marker {
+    display: none;
+}
+
+.accordion-header:hover {
+    background: var(--bg-card-hover);
+}
+
+.accordion-title {
+    color: var(--text-primary);
+    font-size: 0.92rem;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    display: flex;
+    align-items: center;
+}
+
+.accordion-icon {
+    color: var(--purple-light);
+    font-size: 0.75rem;
+    transition: transform 0.25s ease;
+}
+
+.sidebar-accordion[open] .accordion-icon,
+.filters-accordion[open] .accordion-icon {
+    transform: rotate(180deg);
+    color: var(--purple-electric);
+}
+
+.accordion-body {
+    padding: 1rem 1.1rem;
+    border-top: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+/* Filters Group */
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+
+.filter-checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+    padding: 3px 0;
+    flex-wrap: wrap;
+    row-gap: 2px;
+}
+
+.filter-checkbox:hover {
+    color: var(--text-white);
+}
+
+.filter-checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.checkmark {
+    width: 18px;
+    height: 18px;
+    background: var(--bg-card);
+    border: 1.5px solid var(--border-color);
+    border-radius: 5px;
+    margin-right: 0.8rem;
+    position: relative;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.filter-checkbox input[type="checkbox"]:checked + .checkmark {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 8px var(--purple-glow);
+}
+
+.filter-checkbox input[type="checkbox"]:checked + .checkmark::after {
+    content: '✓';
+    position: absolute;
+    top: -2px;
+    left: 3px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 12px;
+}
+
+/* Lead Selector Panel */
+.lead-selector-panel {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    transition: all 0.3s ease;
+}
+
+.panel.lead-selector-panel:has(#lead-selector-accordion[open]) {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+#lead-selector-accordion[open] {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+#lead-selector-accordion[open] > .accordion-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding-bottom: 0.75rem;
+}
+
+#lead-selector-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.lead-controls {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    flex-shrink: 0;
+}
+
+.lead-control-btn {
+    flex: 1;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    padding: 0.45rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.lead-control-btn:hover {
+    background: var(--purple-electric);
+    color: #fff;
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 10px var(--purple-glow);
+}
+
+.lead-list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    min-height: 180px;
+    max-height: calc(100vh - 280px);
+    max-height: calc(100dvh - 280px);
+    padding-right: 0.25rem;
+    background: transparent;
+    border: none;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(140, 82, 255, 0.25) transparent;
+}
+
+.lead-loading {
+    padding: 1rem;
+    text-align: center;
+    color: var(--text-muted);
+    font-style: italic;
+    font-size: 0.85rem;
+}
+
+.lead-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.75rem 0.65rem;
+    border-bottom: 1px solid var(--border-card);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    border-radius: 6px;
+}
+
+.lead-item:hover {
+    background: var(--bg-card);
+    border-left: 3px solid var(--purple-electric);
+}
+
+.lead-item:last-child {
+    border-bottom: none;
+}
+
+.lead-item.selected {
+    background: rgba(140, 82, 255, 0.12);
+    border-left: 3px solid var(--purple-electric);
+}
+
+.lead-checkbox {
+    margin-right: 0.65rem;
+    width: 16px;
+    height: 16px;
+    background: var(--bg-card);
+    border: 1.5px solid var(--border-color);
+    border-radius: 4px;
+    position: relative;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.lead-item.selected .lead-checkbox {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 6px var(--purple-glow);
+}
+
+.lead-item.selected .lead-checkbox::after {
+    content: '✓';
+    position: absolute;
+    top: -3px;
+    left: 2px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+.lead-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.lead-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.lead-name {
+    font-weight: 600;
+    color: var(--text-white);
+    font-size: 0.86rem;
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+}
+
+.lead-type {
+    font-size: 0.68rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    padding: 0.15rem 0.45rem;
+    border-radius: 4px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-card);
+    flex-shrink: 0;
+}
+
+.lead-type.ip {
+    background: rgba(140, 82, 255, 0.15);
+    border-color: rgba(140, 82, 255, 0.3);
+    color: var(--purple-light);
+}
+
+.lead-type.domain {
+    background: rgba(0, 229, 255, 0.15);
+    border-color: rgba(0, 229, 255, 0.3);
+    color: var(--cyan-accent);
+}
+
+.lead-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-top: 0.2rem;
+}
+
+.lead-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 6px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.badge-icon {
+    width: 12px;
+    height: 12px;
+    stroke-width: 2.2px;
+    vertical-align: middle;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.lead-badge.cve {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+    border: 1px solid rgba(59, 130, 246, 0.4);
+}
+
+.lead-badge.poc {
+    background: rgba(243, 156, 18, 0.2);
+    color: #f59e0b;
+    border: 1px solid rgba(243, 156, 18, 0.4);
+}
+
+.lead-badge.kev {
+    background: rgba(220, 20, 60, 0.25);
+    color: #ff4757;
+    animation: pulse-badge 2s infinite;
+    font-weight: 800;
+    border: 1px solid rgba(220, 20, 60, 0.6);
+}
+
+.lead-badge.critical {
+    background: rgba(220, 20, 60, 0.25);
+    color: #ff4757;
+    border: 1px solid rgba(220, 20, 60, 0.5);
+}
+
+.lead-badge.epss {
+    background: rgba(245, 158, 11, 0.18);
+    color: #f59e0b;
+    border: 1px solid rgba(245, 158, 11, 0.4);
+}
+
+@keyframes pulse-badge {
+    0% { box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.7); }
+    70% { box-shadow: 0 0 0 4px rgba(220, 20, 60, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(220, 20, 60, 0); }
+}
+
+.lead-stats {
+    font-size: 0.74rem;
+    color: var(--text-muted);
+    margin-top: 0.2rem;
+    line-height: 1.3;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+    margin-top: auto;
+    padding-top: 1rem;
+    text-align: center;
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar-docs-link {
+    color: var(--purple-light);
+    font-weight: 600;
+    text-decoration: none;
+    font-size: 0.8rem;
+    transition: color 0.2s ease;
+}
+
+.sidebar-docs-link:hover {
+    color: #ffffff;
+    text-decoration: underline;
+}
+
+.sidebar-docs-icon {
+    vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    margin-right: 4px;
+}
+
+.sidebar-powered {
+    margin-top: 0.4rem;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.sidebar-powered a {
+    color: var(--text-white);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.sidebar-powered a:hover {
+    color: var(--purple-electric);
+}
+
+/* ==========================================================================
+   Graph Container & Floating Controls
+   ========================================================================== */
+
+.graph-container {
+    flex: 1;
+    position: relative;
+    background: var(--bg-primary);
+    background-image: radial-gradient(rgba(140, 82, 255, 0.08) 1px, transparent 1px);
+    background-size: 28px 28px;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.cytoscape-graph {
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    cursor: grab;
+}
+
+.cytoscape-graph:active {
+    cursor: grabbing;
+}
+
+/* Custom Selection Box for Right-Click Marquee Selection */
+.custom-selection-box,
+#custom-selection-box {
+    position: absolute;
+    border: 1.5px dashed var(--purple-accent, #8C52FF);
+    background: rgba(140, 82, 255, 0.22);
+    box-shadow: 0 0 16px rgba(140, 82, 255, 0.45), inset 0 0 12px rgba(140, 82, 255, 0.2);
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 99;
+    display: none;
+}
+
+/* Custom Node Right-Click Context Menu */
+.cy-context-menu {
+    position: fixed;
+    background: rgba(18, 20, 29, 0.96);
+    border: 1px solid var(--border-color, rgba(140, 82, 255, 0.35));
+    border-radius: 8px;
+    padding: 6px;
+    min-width: 230px;
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 15px rgba(140, 82, 255, 0.25);
+    backdrop-filter: blur(16px);
+    z-index: 1000;
+    display: none;
+    flex-direction: column;
+    gap: 3px;
+    animation: contextMenuFadeIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes contextMenuFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.96) translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.cy-context-menu-header {
+    padding: 5px 8px 6px 8px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted, #94a3b8);
+    border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
+    margin-bottom: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.cy-context-menu-header .node-title {
+    color: var(--purple-light, #c084fc);
+    font-family: var(--font-mono, monospace);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+.cy-context-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    border-radius: 6px;
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--text-primary, #e2e8f0);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    transition: all 0.12s ease;
+}
+
+.cy-context-menu-item:hover:not(:disabled) {
+    background: rgba(140, 82, 255, 0.22);
+    color: #ffffff;
+    transform: translateX(2px);
+}
+
+.cy-context-menu-item.primary {
+    color: var(--cyan-accent, #00d4ff);
+    font-weight: 600;
+}
+
+.cy-context-menu-item.primary:hover:not(:disabled) {
+    background: rgba(0, 212, 255, 0.18);
+    color: #ffffff;
+}
+
+.cy-context-menu-item:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.cy-context-menu-item .ui-icon {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+}
+
+.cy-context-menu-divider {
+    height: 1px;
+    background: var(--border-card, rgba(255, 255, 255, 0.08));
+    margin: 3px 2px;
+}
+
+/* Spacebar Pan / Selection Mode Toast */
+.spacebar-pan-hint {
+    position: absolute;
+    top: 1.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(25, 27, 38, 0.9);
+    border: 1px solid var(--border-color);
+    color: var(--purple-light);
+    padding: 0.4rem 1rem;
+    border-radius: 40px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    pointer-events: none;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px var(--purple-glow);
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    z-index: 85;
+}
+
+.spacebar-pan-hint.visible {
+    opacity: 1;
+    transform: translateX(-50%) translateY(5px);
+}
+
+/* Floating Graph Actions */
+.floating-controls {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    z-index: 90;
+    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s ease;
+}
+
+.floating-actions-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.floating-btn {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: rgba(25, 27, 38, 0.88);
+    border: 1px solid var(--border-color);
+    color: var(--text-white);
+    font-size: 1.15rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
+    transition: all 0.2s ease;
+    touch-action: manipulation;
+}
+
+.floating-btn:hover, .floating-btn:active {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    color: #fff;
+    transform: scale(1.08);
+    box-shadow: 0 0 18px var(--purple-glow-intense);
+}
+
+.floating-layout-wrapper {
+    position: relative;
+    max-width: 195px;
+}
+
+.floating-layout-select {
+    background: rgba(25, 27, 38, 0.92);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 0.5rem 0.85rem;
+    border-radius: 10px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    font-family: var(--font-main);
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
+    outline: none;
+    transition: all 0.2s ease;
+    width: 100%;
+}
+
+.floating-layout-select:hover, .floating-layout-select:focus {
+    background: var(--bg-card);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 14px var(--purple-glow);
+}
+
+.floating-layout-select option {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    padding: 6px;
+}
+
+.graph-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    color: var(--purple-light);
+    font-weight: 500;
+    z-index: 10;
+}
+
+.spinner {
+    width: 42px;
+    height: 42px;
+    border: 3px solid rgba(140, 82, 255, 0.15);
+    border-top: 3px solid var(--purple-electric);
+    border-radius: 50%;
+    animation: spin 0.9s linear infinite;
+    box-shadow: 0 0 14px var(--purple-glow);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* ==========================================================================
+   Inspector Drawer
+   ========================================================================== */
+
+.inspector-drawer {
+    position: fixed;
+    right: -430px;
+    top: 0;
+    width: 430px;
+    max-width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    box-shadow: -8px 0 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(140, 82, 255, 0.12);
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+}
+
+.inspector-drawer.open {
+    right: 0;
+}
+
+.inspector-header {
+    background: var(--bg-card);
+    padding: 1.15rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.inspector-header h3 {
+    color: var(--text-white);
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 80%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.close-btn {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-card);
+    color: var(--text-secondary);
+    font-size: 1.3rem;
+    cursor: pointer;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    touch-action: manipulation;
+}
+
+.close-btn:hover, .close-btn:active {
+    background: var(--risk-critical);
+    border-color: var(--risk-critical);
+    color: #fff;
+    box-shadow: 0 0 10px rgba(220, 20, 60, 0.4);
+}
+
+.inspector-content {
+    flex: 1;
+    padding: 1.25rem 1.5rem;
+    overflow-y: auto;
+    color: var(--text-primary);
+    line-height: 1.6;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(140, 82, 255, 0.25) transparent;
+    -webkit-overflow-scrolling: touch;
+}
+
+.inspector-content h4 {
+    color: var(--purple-light);
+    margin: 1.2rem 0 0.65rem 0;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.35rem;
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.inspector-content h4:first-child {
+    margin-top: 0;
+}
+
+.inspector-content .property {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 0.5rem 0;
+    padding: 0.65rem 0.85rem;
+    background: var(--bg-card);
+    border-radius: 8px;
+    border: 1px solid var(--border-card);
+    flex-wrap: wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    transition: border-color 0.2s ease;
+}
+
+.inspector-content .property:hover {
+    border-color: var(--border-color);
+}
+
+.inspector-content .property .key {
+    color: var(--text-secondary);
+    font-weight: 500;
+    font-size: 0.82rem;
+    flex-shrink: 0;
+}
+
+.inspector-content .property .value {
+    color: var(--text-white);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-all;
+    text-align: right;
+}
+
+/* Vulnerability Badges in Inspector */
+.inspector-content .vulnerability-badge {
+    display: inline-block;
+    padding: 0.3rem 0.8rem;
+    border-radius: 40px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    margin: 0.2rem;
+}
+
+.vulnerability-badge.critical {
+    background: rgba(220, 20, 60, 0.25);
+    color: #ff4757;
+    border: 1px solid var(--risk-critical);
+}
+
+.vulnerability-badge.high {
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    border: 1px solid var(--risk-high);
+}
+
+.vulnerability-badge.medium {
+    background: rgba(255, 165, 2, 0.2);
+    color: #ffa502;
+    border: 1px solid var(--risk-medium);
+}
+
+.vulnerability-badge.low {
+    background: rgba(46, 213, 115, 0.2);
+    color: #2ed573;
+    border: 1px solid var(--risk-low);
+}
+
+.vulnerability-badge.kev {
+    background: rgba(139, 0, 0, 0.4);
+    color: #ff7675;
+    border: 1px solid var(--risk-critical);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(220, 20, 60, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(220, 20, 60, 0); }
+}
+
+/* Exploit / PoC Cards in Inspector */
+.exploit-item {
+    background: var(--bg-card);
+    border: 1px solid var(--border-card);
+    border-radius: 8px;
+    padding: 0.9rem;
+    margin: 0.5rem 0;
+}
+
+.exploit-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.exploit-source {
+    padding: 0.25rem 0.7rem;
+    border-radius: 40px;
+    font-size: 0.75rem;
+    font-weight: 700;
+}
+
+.exploit-source.github {
+    background: #2d3436;
+    color: #dfe6e9;
+    border: 1px solid #636e72;
+}
+
+.exploit-source.exploitdb {
+    background: rgba(231, 76, 60, 0.25);
+    color: #e74c3c;
+    border: 1px solid #e74c3c;
+}
+
+.exploit-badge.verified {
+    background: rgba(39, 174, 96, 0.2);
+    color: #2ecc71;
+    padding: 0.2rem 0.6rem;
+    border-radius: 40px;
+    font-size: 0.7rem;
+    border: 1px solid #27ae60;
+}
+
+.exploit-title {
+    font-weight: 600;
+    color: var(--text-white);
+    margin: 0.5rem 0;
+    font-size: 0.88rem;
+}
+
+.exploit-details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin: 0.5rem 0;
+}
+
+.exploit-details span {
+    background: var(--bg-secondary);
+    padding: 0.2rem 0.55rem;
+    border-radius: 4px;
+    border: 1px solid var(--border-card);
+    font-family: var(--font-mono);
+    font-size: 0.76rem;
+}
+
+.exploit-url {
+    margin-top: 0.5rem;
+}
+
+.exploit-url a {
+    color: var(--purple-light);
+    text-decoration: none;
+    font-size: 0.82rem;
+    word-break: break-all;
+    transition: color 0.2s ease;
+}
+
+.exploit-url a:hover {
+    color: var(--text-white);
+    text-decoration: underline;
+}
+
+/* ==========================================================================
+   Risk Metrics Accordion & Detailed Cards
+   ========================================================================== */
+
+.risk-metrics-panel {
+    margin-top: 1.25rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.risk-metrics-heading {
+    color: var(--purple-light) !important;
+    font-size: 0.9rem !important;
+    font-weight: 700 !important;
+    margin-bottom: 0.75rem !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    padding-bottom: 0.35rem !important;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+.risk-accordion-group {
+    margin-bottom: 0.55rem;
+    border-radius: 8px;
+    border: 1px solid var(--border-card);
+    background: var(--bg-card);
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+}
+
+.risk-accordion-group:hover {
+    border-color: var(--border-color);
+}
+
+.risk-accordion-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.65rem 0.85rem;
+    background: var(--bg-card);
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.2s ease;
+}
+
+.risk-accordion-header:hover {
+    background: var(--bg-card-hover);
+}
+
+.risk-accordion-header.open {
+    background: var(--bg-card-hover);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.risk-accordion-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    font-size: 0.86rem;
+    color: var(--text-primary);
+}
+
+.risk-accordion-title .accordion-icon {
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.risk-accordion-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.risk-pill-counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 20px;
+    padding: 0 6px;
+    border-radius: 10px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    font-family: var(--font-mono);
+    background: var(--bg-secondary);
+    color: var(--purple-light);
+    border: 1px solid var(--border-color);
+}
+
+.accordion-chevron {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    transition: transform 0.25s ease;
+}
+
+.risk-accordion-header.open .accordion-chevron {
+    transform: rotate(180deg);
+    color: var(--purple-electric);
+}
+
+.risk-accordion-body {
+    padding: 0.65rem;
+    background: var(--bg-secondary);
+    max-height: 320px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(140, 82, 255, 0.25) transparent;
+}
+
+.risk-item-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-card);
+    border-radius: 8px;
+    padding: 0.65rem 0.8rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.15s ease;
+}
+
+.risk-item-card:last-child {
+    margin-bottom: 0;
+}
+
+.risk-item-card:hover {
+    background: var(--bg-card-hover);
+    border-color: var(--border-color);
+}
+
+.risk-item-card.severity-critical {
+    border-left: 3.5px solid var(--risk-critical);
+}
+
+.risk-item-card.severity-high {
+    border-left: 3.5px solid var(--risk-high);
+}
+
+.risk-item-card.severity-medium {
+    border-left: 3.5px solid var(--risk-medium);
+}
+
+.risk-item-card.severity-low {
+    border-left: 3.5px solid var(--risk-low);
+}
+
+.risk-item-card.exploit-item-box {
+    border-left: 3.5px solid #f39c12;
+}
+
+.risk-item-card.service-item-box {
+    border-left: 3.5px solid var(--purple-electric);
+}
+
+.risk-card-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin-bottom: 0.35rem;
+}
+
+.risk-card-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.cve-code {
+    font-family: var(--font-mono);
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: var(--cyan-accent);
+}
+
+.mini-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+.mini-badge.severity {
+    text-transform: uppercase;
+}
+
+.mini-badge.severity.critical {
+    background: rgba(220, 20, 60, 0.25);
+    color: #ff4757;
+    border: 1px solid var(--risk-critical);
+}
+
+.mini-badge.severity.high {
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    border: 1px solid var(--risk-high);
+}
+
+.mini-badge.severity.medium {
+    background: rgba(255, 165, 2, 0.2);
+    color: #ffa502;
+    border: 1px solid var(--risk-medium);
+}
+
+.mini-badge.severity.low {
+    background: rgba(46, 213, 115, 0.2);
+    color: #2ed573;
+    border: 1px solid var(--risk-low);
+}
+
+.mini-badge.kev {
+    background: rgba(139, 0, 0, 0.4);
+    color: #ff7675;
+    border: 1px solid var(--risk-critical);
+}
+
+.mini-badge.poc {
+    background: rgba(243, 156, 18, 0.2);
+    color: #f39c12;
+    border: 1px solid #f39c12;
+}
+
+.mini-badge.github {
+    background: #2d3436;
+    color: #dfe6e9;
+    border: 1px solid #636e72;
+}
+
+.mini-badge.exploitdb {
+    background: rgba(231, 76, 60, 0.25);
+    color: #e74c3c;
+    border: 1px solid #e74c3c;
+}
+
+.mini-badge.verified {
+    background: rgba(39, 174, 96, 0.2);
+    color: #2ecc71;
+    border: 1px solid #27ae60;
+}
+
+.risk-card-metrics {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0.3rem 0;
+    font-size: 0.78rem;
+}
+
+.metric-pill {
+    background: var(--bg-secondary);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 0.74rem;
+    border: 1px solid var(--border-card);
+}
+
+.risk-card-desc {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    line-height: 1.35;
+    margin: 0.35rem 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.exploit-title-text {
+    font-size: 0.82rem;
+    color: var(--text-white);
+    font-weight: 500;
+    margin: 0.35rem 0;
+    word-break: break-word;
+}
+
+.risk-card-meta-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 0.35rem 0;
+}
+
+.meta-tag {
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    padding: 1px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--border-card);
+    font-family: var(--font-mono);
+}
+
+.risk-card-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.4rem;
+    padding-top: 0.35rem;
+    border-top: 1px solid var(--border-card);
+}
+
+.risk-link-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.74rem;
+    font-weight: 600;
+    color: var(--cyan-accent);
+    background: rgba(0, 229, 255, 0.08);
+    border: 1px solid rgba(0, 229, 255, 0.3);
+    text-decoration: none;
+    transition: all 0.15s ease;
+}
+
+.risk-link-btn:hover {
+    background: rgba(0, 229, 255, 0.22);
+    color: #fff;
+    box-shadow: 0 0 8px var(--cyan-glow);
+}
+
+.risk-link-btn.primary {
+    color: #f59e0b;
+    background: rgba(243, 156, 18, 0.1);
+    border-color: rgba(243, 156, 18, 0.35);
+}
+
+.risk-link-btn.primary:hover {
+    background: rgba(243, 156, 18, 0.25);
+    color: #fff;
+}
+
+.risk-focus-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.74rem;
+    font-weight: 600;
+    color: var(--purple-light);
+    background: rgba(140, 82, 255, 0.12);
+    border: 1px solid rgba(140, 82, 255, 0.35);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.risk-focus-btn:hover {
+    background: var(--purple-electric);
+    color: #fff;
+    box-shadow: 0 0 10px var(--purple-glow);
+}
+
+.risk-item-empty {
+    padding: 0.75rem;
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+/* ==========================================================================
+   Responsive Design & Breakpoints
+   ========================================================================== */
+
+/* Laptops and medium screens (<= 1200px) */
+@media (max-width: 1200px) {
+    .panel {
+        padding: 1rem;
+    }
+
+    .inspector-drawer {
+        width: 390px;
+    }
+
+    .metric-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.5rem;
+    }
+
+    .metric-item {
+        padding: 0.5rem 0.35rem;
+        min-height: 60px;
+    }
+
+    .metric-value {
+        font-size: 1.12rem;
+    }
+}
+
+/* Tablets and small laptops (<= 992px) */
+@media (max-width: 992px) {
+    .sidebar-toggle-btn {
+        display: inline-flex;
+    }
+
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: -350px;
+        width: 320px;
+        max-width: 85vw;
+        height: 100vh;
+        height: 100dvh;
+        z-index: 999;
+        box-shadow: 8px 0 35px rgba(0, 0, 0, 0.85);
+        padding: 1.25rem;
+        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .sidebar.open {
+        left: 0;
+    }
+
+    .sidebar-mobile-header {
+        display: flex;
+    }
+
+    .dashboard-main {
+        flex-direction: row;
+    }
+
+    .inspector-drawer {
+        width: 380px;
+        max-width: 90vw;
+    }
+}
+
+/* Mobile & Small Tablets (<= 768px) */
+@media (max-width: 768px) {
+    .header-content {
+        gap: 0.6rem;
+        flex-wrap: wrap;
+        padding: 0.6rem 0.85rem;
+    }
+
+    .header-right {
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        width: 100%;
+        justify-content: flex-end;
+    }
+
+    .control-label {
+        display: inline-flex;
+    }
+
+    .db-select-input {
+        max-width: 140px;
+        font-size: 0.78rem;
+        padding: 0.35rem 0.5rem;
+    }
+
+    .action-btn.export-btn {
+        padding: 0.35rem 0.65rem;
+        font-size: 0.78rem;
+    }
+
+    .brand-title {
+        font-size: 1.15rem;
+    }
+
+    .brand-subtitle {
+        font-size: 0.62rem;
+        display: block;
+    }
+
+    .brand-logo {
+        width: 28px;
+        height: 28px;
+    }
+
+    .header-docs-icon-btn {
+        width: 30px;
+        height: 30px;
+        margin-left: 0.35rem;
+    }
+
+    .target-info {
+        display: none;
+    }
+
+    .sidebar {
+        width: 310px;
+        max-width: 88vw;
+    }
+
+    .inspector-drawer {
+        width: 100%;
+        max-width: 100vw;
+        right: -100%;
+        border-left: none;
+    }
+
+    .inspector-drawer.open {
+        right: 0;
+    }
+
+    .targets-drawer {
+        width: 100%;
+        max-width: 100vw;
+        right: -100%;
+        border-left: none;
+    }
+
+    .targets-drawer.open {
+        right: 0;
+    }
+
+    .targets-drawer-trigger-btn {
+        padding: 0.35rem 0.65rem;
+        font-size: 0.78rem;
+    }
+
+    .inspector-header {
+        padding: 1rem 1.15rem;
+    }
+
+    .inspector-content {
+        padding: 1rem 1.15rem;
+    }
+
+    .floating-controls {
+        bottom: 1rem;
+        left: 1rem;
+    }
+
+    .floating-btn {
+        width: 38px;
+        height: 38px;
+        font-size: 1rem;
+    }
+
+    .floating-layout-select {
+        font-size: 0.75rem;
+        padding: 0.35rem 0.5rem;
+    }
+
+    .spacebar-pan-hint {
+        display: none;
+    }
+}
+
+/* Extra small mobile phones (<= 480px) */
+@media (max-width: 480px) {
+    .header-content {
+        padding: 0.5rem 0.6rem;
+    }
+
+    .header-brand {
+        gap: 0.45rem;
+    }
+
+    .brand-title {
+        font-size: 1.05rem;
+    }
+
+    .brand-subtitle {
+        font-size: 0.58rem;
+    }
+
+    .header-docs-icon-btn {
+        width: 28px;
+        height: 28px;
+        margin-left: 0.25rem;
+    }
+
+    .header-right {
+        width: auto;
+        margin-left: auto;
+        gap: 0.35rem;
+    }
+
+    .db-select-input {
+        max-width: 110px;
+        font-size: 0.72rem;
+        padding: 0.3rem 0.4rem;
+    }
+
+    .action-btn.export-btn {
+        padding: 0.3rem 0.45rem;
+        font-size: 0.72rem;
+    }
+
+    .targets-drawer-trigger-btn {
+        padding: 0.3rem 0.45rem;
+        font-size: 0.72rem;
+    }
+
+    .export-dropdown-menu {
+        right: 0;
+        min-width: 200px;
+    }
+
+    .metric-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .sidebar {
+        width: 100%;
+        max-width: 100vw;
+        left: -100%;
+    }
+
+    .sidebar.open {
+        left: 0;
+    }
+
+    .search-input {
+        font-size: 0.82rem;
+        padding: 0.6rem 0.6rem 0.6rem 2.2rem;
+    }
+
+    .targets-drawer-content {
+        padding: 0.85rem;
+        gap: 0.85rem;
+    }
+
+    .preset-btn {
+        padding: 0.4rem;
+        font-size: 0.72rem;
+    }
+}
+
+/* ==========================================================================
+   Target Management Drawer & Active Scan (Masscan) Component Styles
+   ========================================================================== */
+
+/* Header Trigger Button */
+.targets-drawer-trigger-btn {
+    background: rgba(140, 82, 255, 0.15);
+    border: 1px solid rgba(140, 82, 255, 0.35);
+    color: var(--text-white);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.45rem 0.85rem;
+    border-radius: 8px;
+    font-size: 0.84rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    position: relative;
+}
+
+.targets-drawer-trigger-btn:hover {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 14px var(--purple-glow);
+    color: #fff;
+}
+
+.targets-drawer-trigger-btn.active {
+    background: var(--purple-electric);
+    border-color: #fff;
+    box-shadow: 0 0 16px var(--purple-glow);
+    color: #fff;
+}
+
+.targets-drawer-trigger-btn.is-scanning {
+    background: rgba(0, 240, 255, 0.18);
+    border-color: #00f0ff;
+    box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
+    color: #00f0ff;
+}
+
+.targets-drawer-trigger-btn.is-scanning .target-scan-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: #00f0ff;
+    background: rgba(0, 240, 255, 0.15);
+    border: 1px solid rgba(0, 240, 255, 0.4);
+    padding: 0.1rem 0.45rem;
+    border-radius: 10px;
+    letter-spacing: 0.3px;
+    animation: scanPulse 1.4s ease-in-out infinite;
+}
+
+.target-scan-pulse-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #00f0ff;
+    box-shadow: 0 0 8px #00f0ff;
+    animation: dotBlink 1s infinite alternate;
+}
+
+@keyframes scanPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.6);
+    }
+    70% {
+        box-shadow: 0 0 0 7px rgba(0, 240, 255, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
+    }
+}
+
+@keyframes dotBlink {
+    0% { opacity: 0.3; transform: scale(0.85); }
+    100% { opacity: 1; transform: scale(1.15); }
+}
+
+.target-count-badge {
+    background: #00f0ff;
+    color: #0b0f19;
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 0.1rem 0.45rem;
+    border-radius: 10px;
+    margin-left: 0.2rem;
+    letter-spacing: 0.2px;
+}
+
+/* Target Management Drawer (Right Drawer) */
+.targets-drawer {
+    position: fixed;
+    top: var(--header-height, 60px);
+    right: 0;
+    width: 680px;
+    max-width: 95vw;
+    height: calc(100vh - var(--header-height, 60px));
+    background: var(--bg-primary);
+    border-left: 1px solid var(--border-color);
+    box-shadow: -6px 0 25px rgba(0, 0, 0, 0.65);
+    z-index: 1050;
+    transform: translateX(105%);
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.targets-drawer.open {
+    transform: translateX(0);
+}
+
+.targets-drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.25rem;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+}
+
+.targets-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.drawer-action-btn {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    border-radius: 6px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.drawer-action-btn:hover {
+    background: rgba(140, 82, 255, 0.15);
+    border-color: var(--purple-electric);
+    color: var(--text-white);
+}
+
+.targets-header-title {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.targets-header-icon {
+    color: #00f0ff;
+    width: 20px;
+    height: 20px;
+}
+
+.targets-drawer-header h3 {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: var(--text-white);
+}
+
+.targets-counter {
+    font-size: 0.75rem;
+    background: rgba(0, 240, 255, 0.12);
+    color: #00f0ff;
+    border: 1px solid rgba(0, 240, 255, 0.3);
+    padding: 0.15rem 0.5rem;
+    border-radius: 12px;
+    font-weight: 600;
+}
+
+/* Navigation Tabs */
+.targets-drawer-tabs {
+    display: flex;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.25rem 0.5rem 0;
+    gap: 0.35rem;
+    flex-shrink: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.targets-drawer-tabs::-webkit-scrollbar {
+    display: none;
+}
+
+.drawer-tab-btn {
+    flex: 1;
+    min-width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    padding: 0.65rem 0.85rem;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-secondary);
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.drawer-tab-btn .tab-icon {
+    width: 15px;
+    height: 15px;
+}
+
+.drawer-tab-btn:hover {
+    color: var(--text-white);
+    background: rgba(140, 82, 255, 0.08);
+    border-radius: 6px 6px 0 0;
+}
+
+.drawer-tab-btn.active {
+    color: #00f0ff;
+    border-bottom: 2px solid #00f0ff;
+    background: rgba(0, 240, 255, 0.06);
+    border-radius: 6px 6px 0 0;
+}
+
+.targets-drawer-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(140, 82, 255, 0.3) transparent;
+}
+
+.drawer-tab-pane {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+/* Global Actions */
+.targets-global-actions {
+    display: flex;
+    gap: 0.65rem;
+}
+
+.btn-primary-action {
+    flex: 1;
+    background: linear-gradient(135deg, #8C52FF 0%, #6d28d9 100%);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    padding: 0.65rem 1rem;
+    font-size: 0.88rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 12px rgba(140, 82, 255, 0.35);
+}
+
+.btn-primary-action:hover {
+    background: linear-gradient(135deg, #9d6aff 0%, #7c3aed 100%);
+    box-shadow: 0 0 18px var(--purple-glow);
+    transform: translateY(-1px);
+}
+
+.btn-primary-action.btn-scan-stopping {
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
+    border-color: rgba(245, 158, 11, 0.4) !important;
+    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
+    color: #fff !important;
+}
+
+.btn-primary-action.btn-scan-stopping:hover {
+    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
+    box-shadow: 0 0 18px rgba(245, 158, 11, 0.5) !important;
+}
+
+.btn-nuclei-action.btn-scan-stopping {
+    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
+    border-color: rgba(239, 68, 68, 0.4) !important;
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
+    color: #fff !important;
+}
+
+.btn-nuclei-action.btn-scan-stopping:hover {
+    background: linear-gradient(135deg, #f87171 0%, #991b1b 100%) !important;
+    box-shadow: 0 0 18px rgba(239, 68, 68, 0.5) !important;
+}
+
+.btn-primary-action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.btn-secondary-action {
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 0.65rem 0.85rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    transition: all 0.2s ease;
+}
+
+.btn-secondary-action:hover {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.4);
+    color: #ef4444;
+}
+
+/* Sections */
+.targets-section {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+}
+
+.targets-section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding-bottom: 0.45rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.targets-section-title i,
+.targets-section-title svg {
+    color: var(--purple-light);
+    width: 16px;
+    height: 16px;
+}
+
+/* Empty State */
+.targets-empty-state {
+    text-align: center;
+    padding: 1.5rem 0.8rem;
+    color: var(--text-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.empty-icon {
+    width: 32px;
+    height: 32px;
+    color: var(--text-muted);
+    opacity: 0.6;
+    margin-bottom: 0.2rem;
+}
+
+.targets-empty-state p {
+    margin: 0;
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.empty-hint {
+    font-size: 0.76rem;
+    line-height: 1.4;
+    color: var(--text-muted);
+}
+
+.empty-hint strong {
+    color: #00f0ff;
+}
+
+/* Target List Items */
+.targets-items-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    max-height: 16rem;
+    overflow-y: auto;
+    padding-right: 0.2rem;
+    scrollbar-width: thin;
+}
+
+.target-card-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--bg-card);
+    border: 1px solid var(--border-card);
+    border-radius: 8px;
+    padding: 0.65rem 0.8rem;
+    transition: all 0.2s ease;
+}
+
+.target-card-item:hover {
+    border-color: rgba(140, 82, 255, 0.4);
+    background: rgba(140, 82, 255, 0.05);
+}
+
+.target-card-left {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.target-card-ip-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.target-card-ip {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--text-white);
+}
+
+.target-status-tag {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    letter-spacing: 0.4px;
+}
+
+.target-status-tag.idle {
+    background: rgba(148, 163, 184, 0.15);
+    color: #94a3b8;
+    border: 1px solid rgba(148, 163, 184, 0.3);
+}
+
+.target-status-tag.scanning {
+    background: rgba(0, 240, 255, 0.15);
+    color: #00f0ff;
+    border: 1px solid rgba(0, 240, 255, 0.4);
+    animation: target-pulse 1.5s infinite;
+}
+
+.target-status-tag.completed {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+    border: 1px solid rgba(34, 197, 94, 0.4);
+}
+
+.target-status-tag.failed {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.4);
+}
+
+@keyframes target-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.target-card-meta {
+    font-size: 0.74rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.target-card-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.target-item-btn {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.target-item-btn:hover {
+    background: var(--purple-electric);
+    color: #fff;
+    border-color: var(--purple-electric);
+}
+
+.target-item-btn.btn-remove:hover {
+    background: #ef4444;
+    border-color: #ef4444;
+    color: #fff;
+}
+
+/* Preset Buttons */
+.preset-buttons-group {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.45rem;
+}
+
+.preset-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    padding: 0.45rem 0.5rem;
+    border-radius: 6px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.preset-btn:hover {
+    background: rgba(140, 82, 255, 0.15);
+    border-color: var(--purple-electric);
+    color: var(--text-white);
+}
+
+.preset-btn.active {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    color: #fff;
+    box-shadow: 0 0 10px var(--purple-glow);
+}
+
+/* Form Controls in Drawer */
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.form-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.drawer-text-input {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-white);
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.82rem;
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+.drawer-text-input:focus {
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 8px var(--purple-glow);
+}
+
+/* Rate Slider */
+.slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.rate-value-badge {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: #00f0ff;
+    background: rgba(0, 240, 255, 0.1);
+    border: 1px solid rgba(0, 240, 255, 0.3);
+    padding: 0.1rem 0.45rem;
+    border-radius: 4px;
+}
+
+.drawer-range-slider {
+    width: 100%;
+    accent-color: #8C52FF;
+    cursor: pointer;
+}
+
+.slider-ticks {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.68rem;
+    color: var(--text-muted);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+/* Checkboxes */
+.checkboxes-group {
+    gap: 0.6rem;
+}
+
+.drawer-checkbox-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    gap: 0.5rem;
+}
+
+.drawer-checkbox-label:hover {
+    color: var(--text-white);
+}
+
+.drawer-checkbox-label input[type="checkbox"] {
+    display: none;
+}
+
+.custom-checkbox {
+    width: 16px;
+    height: 16px;
+    background: var(--bg-card);
+    border: 1.5px solid var(--border-color);
+    border-radius: 4px;
+    position: relative;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+}
+
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
+    background: var(--purple-electric);
+    border-color: var(--purple-electric);
+    box-shadow: 0 0 6px var(--purple-glow);
+}
+
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
+    content: '✓';
+    position: absolute;
+    top: -3px;
+    left: 2px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+/* Scan Live Console */
+.scan-live-console {
+    background: #090d16;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 0.65rem;
+    max-height: 14rem;
+    min-height: 9rem;
+    overflow-y: auto;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.72rem;
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.console-line {
+    word-break: break-all;
+}
+
+.console-line.info { color: #94a3b8; }
+.console-line.success { color: #22c55e; }
+.console-line.warning { color: #f59e0b; }
+.console-line.error { color: #ef4444; }
+
+.badge-verified-active {
+    background: rgba(34, 197, 94, 0.18);
+    color: #4ade80;
+    border: 1px solid rgba(34, 197, 94, 0.4);
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 0.15rem 0.45rem;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-left: 0.4rem;
+}
+
+.badge-unverified {
+    background: rgba(245, 158, 11, 0.12);
+    color: #fbbf24;
+    border: 1px dashed #f59e0b;
+    font-size: 0.72rem;
+    font-weight: 600;
+    padding: 0.15rem 0.45rem;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-left: 0.4rem;
+}
+
+/* Nuclei Specific UI Elements */
+.btn-nuclei-action {
+    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
+}
+
+.btn-nuclei-action:hover {
+    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+    box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
+}
+
+.sev-tag-label {
+    font-weight: 700;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.sev-critical-text { color: #ef4444; }
+.sev-high-text { color: #f97316; }
+.sev-medium-text { color: #eab308; }
+.sev-low-text { color: #3b82f6; }
+.sev-info-text { color: #94a3b8; }
+
+.custom-checkbox-red {
+    border-color: rgba(239, 68, 68, 0.4);
+}
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox-red {
+    background: #ef4444;
+    border-color: #ef4444;
+    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
+}
+
+.custom-checkbox-orange {
+    border-color: rgba(249, 115, 22, 0.4);
+}
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox-orange {
+    background: #f97316;
+    border-color: #f97316;
+    box-shadow: 0 0 6px rgba(249, 115, 22, 0.6);
+}
+
+.custom-checkbox-yellow {
+    border-color: rgba(234, 179, 8, 0.4);
+}
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox-yellow {
+    background: #eab308;
+    border-color: #eab308;
+    box-shadow: 0 0 6px rgba(234, 179, 8, 0.6);
+}
+
+.custom-checkbox-blue {
+    border-color: rgba(59, 130, 246, 0.4);
+}
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox-blue {
+    background: #3b82f6;
+    border-color: #3b82f6;
+    box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
+}
+
+.custom-checkbox-slate {
+    border-color: rgba(148, 163, 184, 0.4);
+}
+.drawer-checkbox-label input[type="checkbox"]:checked + .custom-checkbox-slate {
+    background: #64748b;
+    border-color: #64748b;
+    box-shadow: 0 0 6px rgba(100, 116, 139, 0.6);
+}
+
+/* Nuclei Tag Chips Grid */
+.nuclei-tags-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    margin-top: 0.35rem;
+}
+
+.tag-chip-label {
+    cursor: pointer;
+}
+
+.tag-chip-label input[type="checkbox"] {
+    display: none;
+}
+
+.tag-chip {
+    display: inline-block;
+    padding: 0.25rem 0.6rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.76rem;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+}
+
+.tag-chip:hover {
+    border-color: rgba(140, 82, 255, 0.5);
+    color: var(--text-white);
+}
+
+.tag-chip-label input[type="checkbox"]:checked + .tag-chip {
+    background: rgba(140, 82, 255, 0.18);
+    border-color: var(--purple-electric);
+    color: #00f0ff;
+    box-shadow: 0 0 8px var(--purple-glow);
+    font-weight: 600;
+}
+
+.nuclei-perf-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+}
+
+.input-hint {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    margin-top: 0.15rem;
+}
+
+/* Full height logs console */
+.logs-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logs-title-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn-clear-logs {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    padding: 0.15rem 0.45rem;
+    border-radius: 4px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    transition: all 0.2s ease;
+}
+
+.btn-clear-logs:hover {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.4);
+    color: #ef4444;
+}
+
+.btn-clear-logs .ui-icon {
+    width: 12px;
+    height: 12px;
+}
+
+.full-height-console {
+    max-height: 28rem;
+    min-height: 18rem;
+}
+
+/* Individual target scan buttons */
+.target-actions-btns {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.btn-target-scan-mini {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    border-radius: 5px;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    transition: all 0.2s ease;
+}
+
+.btn-target-scan-mini.port-scan:hover {
+    background: rgba(140, 82, 255, 0.2);
+    border-color: var(--purple-electric);
+    color: #fff;
+}
+
+.btn-target-scan-mini.nuclei-scan {
+    color: #f87171;
+    border-color: rgba(239, 68, 68, 0.3);
+}
+
+.btn-target-scan-mini.nuclei-scan:hover {
+    background: rgba(239, 68, 68, 0.2);
+    border-color: #ef4444;
+    color: #fff;
+}
+
+.btn-target-scan-mini:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn-target-remove-mini {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.2s ease;
+}
+
+.btn-target-remove-mini:hover {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+}
+