/* ==========================================================================
   SquidScan — shared application theme
   Loaded LAST in every view so it overrides the per-page inline styles.

   Replaces the neon palette (pure #00ff9d / #ff00aa with glow shadows) with a
   restrained product palette: deep ink surfaces, one teal accent, magenta for
   emphasis only, hairline borders instead of glow.
   ========================================================================== */

:root {
    /* Surfaces */
    --sk-ink: #070a10;
    --sk-ink-raised: #0a0e15;
    --sk-panel: #0e141d;
    --sk-panel-soft: #121a24;

    /* Lines */
    --sk-line: rgba(255, 255, 255, 0.08);
    --sk-line-strong: rgba(255, 255, 255, 0.15);

    /* Text */
    --sk-text: #e6ecf3;
    --sk-muted: #98a5b5;
    --sk-dim: #7d8b9c;

    /* Accents */
    --sk-brand: #22d39a;
    --sk-brand-bright: #35e8ad;
    --sk-brand-deep: #12a578;
    --sk-brand-soft: rgba(34, 211, 154, 0.1);
    --sk-brand-line: rgba(34, 211, 154, 0.3);

    --sk-accent: #e21a8c;
    --sk-accent-bright: #f24aa6;
    --sk-accent-soft: rgba(226, 26, 140, 0.1);
    --sk-accent-line: rgba(226, 26, 140, 0.35);

    /* Cool violet secondary, matching the marketing pages. */
    --sk-violet: #8b6ce8;
    --sk-violet-bright: #a68cf5;
    --sk-violet-soft: rgba(139, 108, 232, 0.1);
    --sk-violet-line: rgba(139, 108, 232, 0.32);

    /* Status */
    --sk-warn: #e0a33e;
    --sk-warn-soft: rgba(224, 163, 62, 0.12);
    --sk-danger: #e0556a;
    --sk-danger-soft: rgba(224, 85, 106, 0.12);
    --sk-info: #4fb0e0;

    /* Retired neon names, remapped so legacy inline rules resolve to the
       new palette instead of falling back to an unset variable. */
    --neon-green: var(--sk-brand);
    --neon-pink: var(--sk-accent);

    --sk-radius-sm: 8px;
    --sk-radius: 12px;
    --sk-radius-lg: 16px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
    background: var(--sk-ink) !important;
    background-image: none !important;
    color: var(--sk-text);
}

::selection {
    background: rgba(34, 211, 154, 0.28);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--sk-brand-bright);
    outline-offset: 2px;
}

a {
    color: var(--sk-brand-bright);
}

a:hover {
    color: #fff;
}

hr {
    border-color: var(--sk-line);
    opacity: 1;
}

/* ==========================================================================
   Application header
   ========================================================================== */

.app-header,
.dashboard-header {
    background: rgba(7, 10, 16, 0.94) !important;
    border-bottom: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-header-brand img,
.logo-container img {
    filter: none !important;
}

.app-header-title {
    letter-spacing: 0.02em !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    color: #fff !important;
}

.app-header-tagline {
    color: var(--sk-dim) !important;
    font-weight: 500 !important;
}

.app-header-page-label {
    color: var(--sk-violet-bright) !important;
    background: var(--sk-violet-soft) !important;
    border: 1px solid var(--sk-violet-line) !important;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Header action pills: drop the glow, keep the hierarchy. */
.app-header .btn,
.app-header .nav-link,
.app-header .header-btn {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Nav buttons. The original BUY SCANS had a gold-to-green gradient plus a
   moving shine and a pulse; a single solid accent reads as the primary action
   without the noise. */
.app-nav-btn {
    background: transparent !important;
    border: 1px solid var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
    box-shadow: none !important;
    border-radius: var(--sk-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.app-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--sk-muted) !important;
    color: #fff !important;
}

.app-nav-btn.is-active {
    background: var(--sk-brand-soft) !important;
    border-color: var(--sk-brand-line) !important;
    color: var(--sk-brand-bright) !important;
    box-shadow: none !important;
}

.app-nav-btn.is-active:hover {
    background: rgba(34, 211, 154, 0.16) !important;
    color: #fff !important;
}

.app-nav-btn-buy {
    background: var(--sk-brand) !important;
    border-color: var(--sk-brand) !important;
    color: #04120d !important;
    animation: none !important;
}

.app-nav-btn-buy::after {
    display: none !important;
}

.app-nav-btn-buy:hover {
    background: var(--sk-brand-bright) !important;
    border-color: var(--sk-brand-bright) !important;
    color: #04120d !important;
}

.app-nav-btn-admin {
    background: transparent !important;
    border-color: var(--sk-accent-line) !important;
    color: var(--sk-accent-bright) !important;
}

.app-nav-btn-admin:hover {
    background: var(--sk-accent-soft) !important;
    color: #fff !important;
}

.app-nav-btn-logout {
    background: transparent !important;
    border-color: var(--sk-line-strong) !important;
    color: var(--sk-muted) !important;
}

.app-nav-btn-logout:hover {
    border-color: var(--sk-muted) !important;
    color: #fff !important;
}

/* Header stat pills */
.app-header-stat {
    background: transparent !important;
    border: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
    color: var(--sk-muted) !important;
}

.app-header-stat .stat-value {
    color: var(--sk-brand-bright) !important;
}

.app-header-stat.is-daily .stat-value {
    color: var(--sk-warn) !important;
}

/* ==========================================================================
   Cards and panels
   ========================================================================== */

.section-card,
.card,
.job-card,
.stat-card,
.profile-settings-card,
.badges-section-card,
.quick-start-card,
.scheduled-scan-card,
.job-meta-card,
.screenshot-thumb-card,
.recon-card,
.recon-chart-wrap,
.recent-job-btn {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
    border-radius: var(--sk-radius) !important;
}

.job-card:hover,
.stat-card:hover,
.scheduled-scan-card:hover,
.program-row:hover,
.feature-card:hover {
    border-color: var(--sk-line-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--sk-line) !important;
    color: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: var(--sk-radius-sm);
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
    transform: none !important;
}

/* ==========================================================================
   Scan panel
   The old layout split an 8/4 grid: a large domain field with three stacked
   buttons of different colors beside it. The field and the primary action now
   sit on one row at matching height, with secondary actions demoted to text
   controls underneath.
   ========================================================================== */

.scan-panel {
    padding: 1.35rem 1.4rem 1.5rem !important;
}

.scan-panel__head {
    margin-bottom: 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--sk-line);
}

.scan-panel__title::before,
.jobs-head__title h2::before,
.quick-start-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.85em;
    margin-right: 0.55rem;
    border-radius: 2px;
    background: var(--sk-violet);
    vertical-align: -0.08em;
}

.scan-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #fff;
}

.scan-panel__hint {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--sk-dim);
}

.scan-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
}

.scan-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@media (min-width: 640px) {
    .scan-input-row {
        flex-direction: row;
        align-items: stretch;
    }
}

.scan-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px !important;
    padding: 0 0.9rem !important;
    font-size: 1rem !important;
}

.scan-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.6rem;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.005em;
}

@media (max-width: 639px) {
    .scan-submit {
        width: 100%;
    }
}

.scan-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.15rem;
    margin-top: 0.7rem;
}

.scan-inline-action,
.advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sk-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.scan-inline-action:hover,
.advanced-toggle:hover {
    color: var(--sk-brand-bright);
}

.scan-inline-action i,
.advanced-toggle i {
    font-size: 0.72rem;
}

/* The primary scan action had the same neon gradient as the old nav CTA. */
.scan-btn {
    background: var(--sk-brand) !important;
    color: #04120d !important;
    border: 1px solid var(--sk-brand) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
}

.scan-btn:hover,
.scan-btn:focus {
    background: var(--sk-brand-bright) !important;
    border-color: var(--sk-brand-bright) !important;
    filter: none !important;
    color: #04120d !important;
}

/* Solid brand buttons keep dark text for contrast on teal. */
.btn-success,
.btn-primary,
.btn-login,
.quick-start-btn,
.save-btn {
    background: var(--sk-brand) !important;
    border-color: var(--sk-brand) !important;
    color: #04120d !important;
}

.btn-success:hover,
.btn-primary:hover,
.btn-login:hover,
.quick-start-btn:hover,
.save-btn:hover {
    background: var(--sk-brand-bright) !important;
    border-color: var(--sk-brand-bright) !important;
    color: #04120d !important;
}

.btn-outline-success,
.btn-outline-primary {
    background: transparent !important;
    border-color: var(--sk-brand-line) !important;
    color: var(--sk-brand-bright) !important;
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    background: var(--sk-brand-soft) !important;
    border-color: var(--sk-brand) !important;
    color: #fff !important;
}

.btn-outline-light,
.btn-secondary {
    background: transparent !important;
    border-color: var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
}

.btn-outline-light:hover,
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--sk-muted) !important;
    color: #fff !important;
}

.btn-outline-warning,
.btn-warning {
    background: transparent !important;
    border-color: rgba(224, 163, 62, 0.4) !important;
    color: var(--sk-warn) !important;
}

.btn-outline-danger,
.btn-danger {
    background: transparent !important;
    border-color: rgba(224, 85, 106, 0.4) !important;
    color: var(--sk-danger) !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select,
input,
textarea,
select {
    background-color: var(--sk-ink) !important;
    border: 1px solid var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
    border-radius: var(--sk-radius-sm) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: var(--sk-ink) !important;
    border-color: var(--sk-brand) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 154, 0.16) !important;
    color: var(--sk-text) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--sk-dim) !important;
}

.form-label,
label {
    color: var(--sk-muted);
}

/* ==========================================================================
   Status and severity badges
   ========================================================================== */

.status-badge,
.task-badge,
.recurrence-badge,
.platform-badge,
.badge {
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.status-completed,
.task-badge.completed {
    background: var(--sk-brand-soft) !important;
    color: var(--sk-brand-bright) !important;
    border: 1px solid var(--sk-brand-line) !important;
}

.status-running,
.task-badge.running {
    background: var(--sk-warn-soft) !important;
    color: var(--sk-warn) !important;
    border: 1px solid rgba(224, 163, 62, 0.35) !important;
}

.status-failed,
.task-badge.failed {
    background: var(--sk-danger-soft) !important;
    color: var(--sk-danger) !important;
    border: 1px solid rgba(224, 85, 106, 0.35) !important;
}

.status-pending,
.status-queued,
.status-awaiting_host,
.task-badge.pending {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--sk-muted) !important;
    border: 1px solid var(--sk-line) !important;
}

.status-cancelled {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--sk-dim) !important;
    border: 1px solid var(--sk-line) !important;
}

/* ==========================================================================
   Typography accents
   ========================================================================== */

.platform-h1,
.neon-text,
.neon-text-pink,
.glow,
.glow-text {
    color: #fff !important;
    text-shadow: none !important;
}

.neon-border {
    box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
    text-shadow: none !important;
}

.text-success {
    color: var(--sk-brand-bright) !important;
}

.text-warning {
    color: var(--sk-warn) !important;
}

.text-danger {
    color: var(--sk-danger) !important;
}

.text-muted {
    color: var(--sk-dim) !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sk-text);
    --bs-table-border-color: var(--sk-line);
    color: var(--sk-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--sk-line);
}

.table thead th,
.tool-data-table th {
    color: var(--sk-dim) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--sk-line-strong) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.025);
    color: var(--sk-text);
}

/* ==========================================================================
   Modals and alerts
   ========================================================================== */

.modal-content,
.modal-body,
.modal-header,
.modal-footer {
    background: var(--sk-panel) !important;
    color: var(--sk-text);
    border-color: var(--sk-line) !important;
}

.modal-header,
.modal-footer {
    background: var(--sk-ink-raised) !important;
}

.modal-content {
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9) !important;
    border-radius: var(--sk-radius-lg) !important;
}

.alert {
    border-radius: var(--sk-radius-sm) !important;
    border: 1px solid var(--sk-line-strong) !important;
    box-shadow: none !important;
}

.alert-danger {
    background: var(--sk-danger-soft) !important;
    color: #f6b7c0 !important;
    border-color: rgba(224, 85, 106, 0.35) !important;
}

.alert-success {
    background: var(--sk-brand-soft) !important;
    color: var(--sk-brand-bright) !important;
    border-color: var(--sk-brand-line) !important;
}

.alert-warning {
    background: var(--sk-warn-soft) !important;
    color: #f0cd8f !important;
    border-color: rgba(224, 163, 62, 0.35) !important;
}

.alert-info {
    background: rgba(79, 176, 224, 0.1) !important;
    color: #a9d9f2 !important;
    border-color: rgba(79, 176, 224, 0.3) !important;
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.login-card {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line-strong) !important;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9) !important;
    border-radius: var(--sk-radius-lg) !important;
}

.login-card h1 {
    color: #fff !important;
    text-shadow: none !important;
    letter-spacing: 0.04em !important;
    font-size: 1.9rem !important;
    font-weight: 700 !important;
}

.login-card .byline {
    color: var(--sk-dim) !important;
    letter-spacing: 0.14em !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
}

.btn-google {
    background: transparent !important;
    border: 1px solid var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
}

.btn-google:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--sk-muted) !important;
}

/* ==========================================================================
   Page-level chrome the views bring themselves
   ========================================================================== */

.war-map-shell,
.war-map-hud,
.war-strike-feed,
.preview-paywall,
.dashboard-tour-card,
.profile-tour-card,
.worker-warm-banner {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
}

.preview-paywall {
    border-color: var(--sk-accent-line) !important;
}

/* Recon Intelligence used a magenta border and neon labels around the whole
   block. Keep magenta only on the heading label, not the 2px frame. */
.recon-dashboard {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: var(--sk-radius) !important;
}

.recon-dashboard h5 {
    color: var(--sk-accent-bright) !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.recon-dashboard .recon-subtitle {
    color: var(--sk-muted) !important;
    opacity: 1 !important;
}

.recon-stat-tile {
    background: var(--sk-ink) !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: var(--sk-radius-sm) !important;
}

.recon-stat-tile:hover {
    border-color: var(--sk-line-strong) !important;
    box-shadow: none !important;
}

.recon-stat-tile .stat-label {
    color: var(--sk-dim) !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
}


/* Floating share button */
#shareBtn {
    background: var(--sk-ink-raised) !important;
    border: 1px solid var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.9) !important;
    border-radius: var(--sk-radius-sm) !important;
}

#shareBtn:hover {
    border-color: var(--sk-brand-line) !important;
    color: var(--sk-brand-bright) !important;
}

/* Profile page stat cards and section titles */
.stat-label {
    color: var(--sk-dim) !important;
    letter-spacing: 0.08em !important;
}

.stat-value {
    color: #fff !important;
    text-shadow: none !important;
}

.quick-start-card h5,
.badges-section-title {
    color: var(--sk-accent-bright) !important;
    text-shadow: none !important;
    letter-spacing: 0.08em !important;
}

.settings-collapse-toggle {
    color: var(--sk-muted) !important;
    background: var(--sk-panel) !important;
    border-color: var(--sk-line) !important;
}

.settings-collapse-toggle:hover {
    color: #fff !important;
    border-color: var(--sk-line-strong) !important;
}

/* Scan-changes page. Summary tiles and category panels each carried their own
   accent, which read as several competing colors on one screen. */
.summary-tile,
.category-card,
.list-block {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line) !important;
    box-shadow: none !important;
}

.summary-tile h4,
.category-header h5,
.category-header h6 {
    color: var(--sk-text) !important;
    text-shadow: none !important;
}

.delta-badge {
    box-shadow: none !important;
    border: 1px solid var(--sk-line-strong) !important;
    font-weight: 600 !important;
}

.delta-up-risk {
    background: var(--sk-danger-soft) !important;
    color: var(--sk-danger) !important;
    border-color: rgba(224, 85, 106, 0.35) !important;
}

.delta-down-good {
    background: var(--sk-brand-soft) !important;
    color: var(--sk-brand-bright) !important;
    border-color: var(--sk-brand-line) !important;
}

.delta-neutral {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--sk-muted) !important;
}

.list-block.added {
    border-left: 2px solid var(--sk-brand) !important;
}

.list-block.removed {
    border-left: 2px solid var(--sk-danger) !important;
}

/* AI Holistic Analysis: the whole section was framed in magenta and every
   heading was magenta too, which made a long report hard to scan. Keep a single
   accent on the frame and let the headings be white. */
.ai-report {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line-strong) !important;
    border-left: 2px solid var(--sk-accent) !important;
    border-radius: var(--sk-radius) !important;
    box-shadow: none !important;
}

.ai-report h1,
.ai-report h2,
.ai-report h3,
.ai-report h4,
.ai-report h5,
.ai-report-content h1,
.ai-report-content h2,
.ai-report-content h3,
.ai-report-content h4 {
    color: #fff !important;
    text-shadow: none !important;
}

.ai-report h2 {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--sk-line);
}

.ai-report-content strong,
.ai-tool-analysis strong {
    color: var(--sk-brand-bright);
}

.ai-report-content em,
.ai-tool-analysis em {
    color: var(--sk-muted);
}

.ai-report-content table thead th {
    color: var(--sk-dim) !important;
    background: transparent !important;
}

.ai-report-content td {
    color: var(--sk-text);
}

/* Login "Report Abuse" pill: a solid red slab was louder than the login card. */
.report-abuse-btn {
    background: var(--sk-panel) !important;
    border: 1px solid var(--sk-line-strong) !important;
    color: var(--sk-muted) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.report-abuse-btn:hover {
    background: var(--sk-danger-soft) !important;
    border-color: rgba(224, 85, 106, 0.4) !important;
    color: #f6b7c0 !important;
    transform: none !important;
}

/* "Need a real pentest?" promo pill. It carries inline styles, so target the
   element directly and restate the geometry the inline rules set. Shrunk and
   kept to the left so it does not sit under the floating report actions. */
a[href="https://squidoffense.com"] {
    background: var(--sk-accent-soft) !important;
    border-color: var(--sk-accent-line) !important;
    color: var(--sk-accent-bright) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    padding: 8px 14px !important;
    bottom: 16px !important;
    right: auto !important;
    left: 16px !important;
}

a[href="https://squidoffense.com"]:hover {
    background: rgba(226, 26, 140, 0.18) !important;
    color: #fff !important;
}

/* Section headings inside cards */
.section-card h5,
.section-card h4,
.card h5,
.recon-card h5,
.badges-section-title {
    color: #fff !important;
    text-shadow: none !important;
    letter-spacing: 0.01em !important;
}

/* Muted helper text that the views hardcode as near-white */
.text-white-50,
.text-white\/50 {
    color: var(--sk-dim) !important;
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */

* {
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Jobs list header
   ========================================================================== */

.jobs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sk-line);
}

.jobs-head__title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}

.jobs-head__title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #fff !important;
}

.jobs-head__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--sk-dim);
}

.jobs-head__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.jobs-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.8rem;
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-radius-sm);
    background: transparent;
    color: var(--sk-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.jobs-refresh:hover {
    border-color: var(--sk-violet-line);
    color: var(--sk-violet-bright);
}

.jobs-refresh i {
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    .jobs-head {
        padding: 0.85rem 1rem;
    }

    .jobs-refresh span {
        display: none;
    }

    .jobs-refresh {
        width: 34px;
        padding: 0;
        justify-content: center;
    }
}

/* ==========================================================================
   Profile page
   ========================================================================== */

.profile-page {
    max-width: 1180px;
}

.profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--sk-line);
}

.profile-head__identity {
    min-width: 0;
}

.profile-head__name {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    color: #fff !important;
    text-shadow: none !important;
}

.profile-head__sub {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--sk-dim) !important;
    opacity: 1 !important;
}

.profile-head__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.profile-head__updated {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--sk-dim) !important;
    opacity: 1 !important;
}

.profile-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.85rem;
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-radius-sm);
    background: transparent;
    color: var(--sk-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.profile-refresh:hover {
    border-color: var(--sk-violet-line);
    color: var(--sk-violet-bright);
}

.profile-refresh i {
    font-size: 0.75rem;
}

/* Quick start */

.quick-start-card {
    padding: 1.25rem 1.35rem 1.35rem !important;
}

.quick-start-head {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--sk-line);
}

.quick-start-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: #fff !important;
    text-shadow: none !important;
    letter-spacing: -0.01em;
}

.quick-start-sub {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--sk-dim) !important;
}

.quick-start-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@media (min-width: 640px) {
    .quick-start-form {
        flex-direction: row;
        align-items: stretch;
    }
}

.quick-start-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px !important;
    padding: 0 0.9rem !important;
    font-size: 0.95rem !important;
}

.quick-start-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 1.4rem;
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .quick-start-btn {
        width: 100%;
    }
}

/* Stat row */

.profile-stats {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

@media (min-width: 600px) {
    .profile-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.profile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-radius);
    background: var(--sk-panel);
}

.profile-stat__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sk-dim);
}

.profile-stat__value {
    font-size: 1.85rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}

.profile-stat:nth-child(2) .profile-stat__value {
    color: var(--violet-bright);
}

.profile-stats__hint {
    font-size: 0.8125rem;
    color: var(--sk-dim);
}

/* ==========================================================================
   Scheduled scans header (collapsible)
   ========================================================================== */

.scheduled-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sk-line) !important;
    cursor: pointer;
    user-select: none;
}

.scheduled-head:hover {
    background: rgba(255, 255, 255, 0.02);
}

.scheduled-head__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #fff !important;
}

.scheduled-head__chevron {
    font-size: 0.75rem;
    color: var(--sk-dim);
    transition: transform 0.18s ease;
}

.scheduled-head[aria-expanded="true"] .scheduled-head__chevron {
    transform: rotate(90deg);
}

@media (max-width: 640px) {
    .scheduled-head {
        padding: 0.85rem 1rem;
    }

    .scheduled-head .jobs-refresh span {
        display: none;
    }
}

/* ==========================================================================
   Report page accents
   The report previously gave every panel its own saturated hue. Panels are now
   neutral; color is reserved for severity and state.
   ========================================================================== */

.recon-stat-tile .stat-icon {
    color: var(--sk-dim) !important;
    opacity: 0.85;
}

.recon-stat-tile .stat-icon i {
    font-size: 1rem;
}

/* Values are white by default. Only tiles that represent a problem take color,
   so a normal scan does not look like an alarm panel. */
.recon-stat-tile .stat-value { color: #fff !important; }
.recon-stat-tile.critical .stat-value { color: #d9534f !important; }
.recon-stat-tile.warning .stat-value { color: #d4b25e !important; }

/* Panel headings: neutral, with the icon carrying a single accent. */
.recon-chart-card h6 {
    color: var(--sk-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

.recon-chart-card h6 i {
    color: var(--sk-violet-bright) !important;
}

.recon-ports-table thead th {
    color: var(--sk-dim) !important;
    font-weight: 600 !important;
}

.recon-ports-table tbody td {
    color: var(--sk-text) !important;
}

.recon-dashboard h5 {
    color: var(--sk-text) !important;
    letter-spacing: 0.02em !important;
    font-weight: 650 !important;
}

.recon-dashboard h5 i {
    color: var(--sk-violet-bright) !important;
}

/* Port numbers are data. The service chip carries the only tint. */
.recon-ports-table tbody td,
.recon-ports-table tbody td code,
.recon-ports-table tbody td .port-num {
    color: var(--sk-text) !important;
}

/* Port and service chips in the ports table */
.recon-ports-table .badge,
.recon-port-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-muted) !important;
}

/* Tool cards: drop the per-card accent borders. */
.tool-card {
    border: 1px solid var(--sk-line) !important;
    background: var(--sk-panel) !important;
}

.tool-section-label {
    color: var(--sk-dim) !important;
}

.chart-drilldown-hint {
    color: var(--sk-dim) !important;
}