/* Reset & Base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

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

/* Dropdown Menu Styles */
.dropdown-menu.show {
    display: block !important;
}

.dropdown-item:hover {
    background: var(--bg-hover) !important;
}

/* Default = grain black (no flash; script syncs class from localStorage) */
:root {
    --font-ui: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'Cascadia Code', 'Consolas', 'Fira Code', 'SF Mono', ui-monospace, monospace;
    --bg-primary: #050505;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #101010;
    --bg-hover: #161616;
    --border-color: #252525;
    --text-primary: #e8eaed;
    --text-secondary: rgba(232, 234, 237, 0.55);
    --text-muted: rgba(232, 234, 237, 0.38);
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --success: #22c55e;
    --danger: #f87171;
    --warning: #fbbf24;
    --purple: #a78bfa;
    --shell-nav-w: 272px;
    --shell-bar-h: 52px;
    --shell-ribbon-h: 42px;
    --header-top-bg: var(--bg-secondary);
    --header-top-edge: var(--border-color);
    --header-top-text: var(--text-primary);
    --header-top-muted: var(--text-secondary);
    --header-top-hover: var(--bg-hover);
    --header-brand-text: var(--text-primary);
    --header-brand-plus: var(--accent);
    --header-brand-suite: var(--text-secondary);
    --header-ribbon-bg: var(--bg-tertiary);
    /* Stacking: Quick URL drawer ~20000; portaled service pick ~100060; alerts/modals above all */
    --z-quick-url-drawer: 20000;
    --z-dashboard-alert: 100700;
    --z-dashboard-alert-progress: 100705;
    --z-dashboard-toast: 100810;
    --map-tile-filter: invert(1) hue-rotate(180deg) brightness(0.76) contrast(0.9) saturate(0.55);
    --map-vignette: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.38) 100%);
    --map-attribution-bg: rgba(10, 10, 10, 0.92);
    --map-blend: multiply;
}

html {
    background: var(--bg-primary);
}

/* Dark theme — B2B Sender Pro / Fluent dark */
:root.dark-theme,
html.dark-theme {
    --bg-primary: #141414;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #252525;
    --bg-hover: #313131;
    --border-color: #383838;
    --text-primary: #f0f0f0;
    --text-secondary: rgba(240, 240, 240, 0.55);
    --text-muted: rgba(240, 240, 240, 0.35);
    --accent: #0078d4;
    --accent-hover: #1484d9;
    --success: #54b054;
    --danger: #f1707a;
    --warning: #fcba19;
    --purple: #c4b5fd;
    --header-top-bg: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
    --header-top-edge: #383838;
    --header-top-text: #f0f0f0;
    --header-top-muted: rgba(240, 240, 240, 0.65);
    --header-top-hover: rgba(255, 255, 255, 0.08);
    --header-brand-text: #f0f0f0;
    --header-brand-plus: #6cb4f5;
    --header-brand-suite: rgba(240, 240, 240, 0.52);
    --header-ribbon-bg: #252525;
    --map-tile-filter: invert(1) hue-rotate(182deg) brightness(0.8) contrast(0.9) saturate(0.58);
    --map-vignette: linear-gradient(180deg, rgba(10, 10, 10, 0.48) 0%, rgba(10, 10, 10, 0.1) 46%, rgba(10, 10, 10, 0.36) 100%);
    --map-attribution-bg: rgba(30, 30, 30, 0.92);
    --map-blend: multiply;
}

/* Red theme */
:root.red-theme,
html.red-theme {
    --bg-primary: #0f0a0c;
    --bg-secondary: #1a0f12;
    --bg-tertiary: #251318;
    --bg-hover: #2d151a;
    --border-color: #3d1f26;
    --text-primary: #eceef1;
    --text-secondary: #b8bcc4;
    --text-muted: #949aa6;
    --accent: #dc2626;
    --accent-hover: #b91c1c;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --purple: #8b5cf6;
    --header-top-bg: var(--bg-secondary);
    --header-top-edge: var(--border-color);
    --header-top-text: var(--text-primary);
    --header-top-muted: var(--text-secondary);
    --header-top-hover: var(--bg-hover);
    --header-brand-text: var(--text-primary);
    --header-brand-plus: var(--accent);
    --header-brand-suite: var(--text-secondary);
    --header-ribbon-bg: var(--bg-tertiary);
    --map-tile-filter: invert(1) hue-rotate(165deg) brightness(0.72) contrast(0.94) saturate(0.5) sepia(0.16);
    --map-vignette: linear-gradient(180deg, rgba(45, 12, 16, 0.52) 0%, rgba(15, 8, 10, 0.12) 46%, rgba(38, 14, 18, 0.42) 100%);
    --map-attribution-bg: rgba(26, 15, 18, 0.92);
    --map-blend: multiply;
}

:root.red-theme .app-header,
:root.red-theme .sidebar {
    border-color: rgba(220, 38, 38, 0.2);
}
:root.red-theme .stat-card,
:root.red-theme .summary-card,
:root.red-theme .section {
    border-color: rgba(220, 38, 38, 0.15);
}

/* Grain black (third theme; localStorage key remains "light") */
:root.light-theme,
html.light-theme {
    --bg-primary: #050505;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #101010;
    --bg-hover: #161616;
    --border-color: #252525;
    --text-primary: #e8eaed;
    --text-secondary: rgba(232, 234, 237, 0.55);
    --text-muted: rgba(232, 234, 237, 0.38);
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --success: #22c55e;
    --danger: #f87171;
    --warning: #fbbf24;
    --purple: #a78bfa;
    --header-top-bg: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
    --header-top-edge: #252525;
    --header-top-text: #e8eaed;
    --header-top-muted: rgba(232, 234, 237, 0.65);
    --header-top-hover: rgba(255, 255, 255, 0.08);
    --header-brand-text: #e8eaed;
    --header-brand-plus: #93c5fd;
    --header-brand-suite: rgba(232, 234, 237, 0.5);
    --header-ribbon-bg: #101010;
    --map-tile-filter: invert(1) hue-rotate(180deg) brightness(0.76) contrast(0.9) saturate(0.55);
    --map-vignette: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.38) 100%);
    --map-attribution-bg: rgba(10, 10, 10, 0.92);
    --map-blend: multiply;
}

html.light-theme {
    background: var(--bg-primary);
}

/* Film grain above the UI; pointer-events none; below modals/tour (z-index 10050+) */
html.light-theme body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.085;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

:root.light-theme .stat-card,
:root.light-theme .summary-card,
:root.light-theme .settings-form,
:root.light-theme .section {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root.light-theme .form-input:focus,
:root.light-theme select.form-input:focus,
:root.light-theme textarea.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

body {
    font-family: var(--font-ui);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.55;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
}

/* Themed scrollbars (thin track + accent-aware thumb) — avoids default OS/browser chrome */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    border: 2px solid var(--bg-secondary);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
    border-color: var(--bg-secondary);
}

*::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Explicit themed scroll regions (overrides OS overlay scrollbars where supported) */
.panel-themed-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

.panel-themed-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.panel-themed-scroll::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.panel-themed-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    border: 2px solid var(--bg-secondary);
    background-clip: padding-box;
}

.panel-themed-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
    border-color: var(--bg-secondary);
}

.panel-themed-scroll::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

.panel-themed-scroll--terminal {
    scrollbar-color: #4a4a4a #161616;
}

.panel-themed-scroll--terminal::-webkit-scrollbar-track {
    background: #161616;
}

.panel-themed-scroll--terminal::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-color: #161616;
}

.panel-themed-scroll--terminal::-webkit-scrollbar-thumb:hover {
    background: #5e5e5e;
}

.panel-themed-scroll--terminal::-webkit-scrollbar-corner {
    background: #161616;
}

.panel-themed-scroll--light {
    scrollbar-color: #b0b5bb #e8eaed;
}

.panel-themed-scroll--light::-webkit-scrollbar-track {
    background: #e8eaed;
}

.panel-themed-scroll--light::-webkit-scrollbar-thumb {
    background: #b0b5bb;
    border-color: #e8eaed;
}

.panel-themed-scroll--light::-webkit-scrollbar-thumb:hover {
    background: #959aa1;
}

.panel-themed-scroll--light::-webkit-scrollbar-corner {
    background: #e8eaed;
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

/* Readability: content and typography */
.content-area {
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
.view-subtitle {
    line-height: 1.6;
    max-width: 56em;
}
.form-group label,
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.form-help {
    line-height: 1.55;
    margin-top: 6px;
}
.stat-card .stat-value,
.summary-card h4 {
    font-weight: 600;
    color: var(--text-primary);
}

/* App Container */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Header — two-row shell (brand/actions + command toolbar) */
.app-header {
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-bottom: none;
    padding: 0;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.app-header-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-height: var(--shell-bar-h);
    padding: 0 16px 0 0;
    flex-shrink: 0;
    background: var(--header-top-bg);
    border-bottom: 1px solid var(--header-top-edge);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
}

.app-header-ticker {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    min-height: var(--shell-bar-h);
    border-right: 1px solid var(--header-top-edge);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), transparent 42%);
    overflow: hidden;
}

.app-header-ticker[hidden] {
    display: none !important;
}

.app-header-ticker-label {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--header-ticker-label-text, var(--accent, #3b82f6));
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid var(--header-ticker-label-border, rgba(59, 130, 246, 0.35));
    background: var(--header-ticker-label-bg, rgba(59, 130, 246, 0.1));
}

.app-header-ticker--motivation {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent 42%);
}

.app-header-ticker--motivation .app-header-ticker-label {
    color: var(--header-ticker-motivation-label-text, #10b981);
    border-color: var(--header-ticker-motivation-label-border, rgba(16, 185, 129, 0.4));
    background: var(--header-ticker-motivation-label-bg, rgba(16, 185, 129, 0.12));
}

.app-header-ticker--motivation .app-header-ticker-text {
    color: var(--header-ticker-motivation-text, color-mix(in srgb, #10b981 18%, var(--text-primary, #e8eaed)));
    font-style: italic;
}

.app-header-ticker-viewport {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 1.35rem;
}

.app-header-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    will-change: transform;
}

.app-header-ticker-track.is-scrolling,
.app-header-ticker-track.app-header-ticker-track--loop.is-scrolling {
    animation-name: app-header-ticker-seamless;
    animation-duration: var(--ticker-loop-duration, 24s);
    animation-timing-function: linear;
    animation-iteration-count: var(--ticker-loop-count, infinite);
    animation-fill-mode: none;
}

.app-header-ticker-track--motivation.is-scrolling {
    --ticker-loop-count: infinite;
}

@keyframes app-header-ticker-seamless {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(var(--ticker-loop-distance, -50%), 0, 0);
    }
}

.app-header-ticker-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--header-ticker-text, var(--text-primary, #e8eaed));
    letter-spacing: 0.01em;
    line-height: 1.3;
    flex-shrink: 0;
}

.app-header-ticker-text--dup {
    pointer-events: none;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
}

/* Push controls right only when the news ticker row is hidden */
.app-header-top:not(:has(.app-header-ticker:not([hidden]))) .header-right {
    margin-left: auto;
}

.mp-broadcast-editor {
    height: 200px;
    background: white;
    color: black;
    border-radius: 4px;
}

.mp-panel-news-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.mp-panel-news-section {
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    padding-top: 16px;
}

.app-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    width: var(--shell-nav-w);
    flex-shrink: 0;
    padding: 0 18px;
    border-right: 1px solid var(--header-top-edge);
    min-height: var(--shell-bar-h);
    overflow: visible;
}

.app-header-brand .logo {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.05;
    font-size: clamp(1.38rem, 1.15rem + 0.55vw, 1.68rem);
    font-weight: inherit;
    overflow: visible;
}

/* Text-only 3D+ Suite wordmark */
.brand-lockup {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38em;
    line-height: 1.05;
    white-space: nowrap;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    max-width: 100%;
}

.brand-name {
    font-weight: 700;
    font-size: 1em;
    letter-spacing: -0.035em;
    color: var(--header-brand-text, var(--text-primary));
}

.brand-name .brand-plus {
    color: var(--header-brand-plus, var(--accent));
    font-weight: 600;
    font-size: 1em;
    line-height: inherit;
    vertical-align: baseline;
    position: static;
    top: auto;
    margin-left: 0;
    letter-spacing: -0.04em;
}

.brand-suite {
    font-weight: 500;
    font-size: 0.86em;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--header-brand-suite, var(--text-secondary));
    opacity: 0.9;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 1.05;
}

.brand-lockup--header {
    font-size: inherit;
}

.brand-lockup--hero {
    font-size: clamp(2rem, 4.5vw, 2.65rem);
}

.brand-lockup--hero .brand-suite {
    font-size: 0.94em;
    opacity: 0.8;
}

.brand-lockup--card {
    justify-content: center;
    font-size: 1.85rem;
}

.brand-lockup--card .brand-suite {
    font-size: 0.94em;
    opacity: 0.72;
}

/* Docs / legacy superscript + */
.brand-plus {
    font-size: 0.5em;
    font-weight: 700;
    line-height: 0;
    vertical-align: baseline;
    position: relative;
    top: -0.55em;
    margin-left: 0.03em;
}

.app-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: var(--shell-ribbon-h);
    padding: 6px 16px;
    border-top: none;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-ribbon-bg);
    position: relative;
    overflow-x: clip;
}

.app-header-top .header-right {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 8px;
    padding-left: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 0;
}

.app-header-top .header-btn,
.app-header-top .marketplace-notif-bell-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--header-top-text);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 11px;
    min-height: 34px;
    gap: 6px;
    box-shadow: none;
}

.app-header-top .header-btn svg {
    width: 16px;
    height: 16px;
    color: var(--header-top-muted);
}

.app-header-top .header-btn span {
    font-size: 13px;
}

.app-header-top .header-btn:hover {
    background: var(--header-top-hover);
    border-color: transparent;
    color: var(--header-top-text);
}

.app-header-top .header-btn:hover svg {
    color: var(--header-top-text);
}

.app-header-top .antibot-select {
    background: color-mix(in srgb, var(--header-top-text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--header-top-text) 22%, transparent);
    border-radius: 6px;
    color: var(--header-top-text);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 10px;
    min-height: 34px;
    min-width: 120px;
    max-width: 160px;
}

.app-header-top .antibot-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.app-header-top .engine-select {
    background: color-mix(in srgb, var(--header-top-text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--header-top-text) 22%, transparent);
    border-radius: 6px;
    color: var(--header-top-text);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 10px;
    min-height: 34px;
    min-width: 120px;
    max-width: 160px;
    cursor: pointer;
}

.app-header-top .engine-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.app-header-top .engine-select-wrapper--default .engine-select {
    background: color-mix(in srgb, var(--header-brand-plus, var(--accent)) 28%, transparent);
    border-color: color-mix(in srgb, var(--header-top-text) 32%, transparent);
    color: var(--header-top-text);
}

.app-header-top .engine-select-wrapper--scramjet .engine-select {
    background: color-mix(in srgb, var(--warning) 32%, transparent);
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
    color: var(--header-top-text);
}

.app-header-top .engine-select-wrapper--puppeteer .engine-select {
    background: color-mix(in srgb, var(--purple) 32%, transparent);
    border-color: color-mix(in srgb, var(--purple) 42%, transparent);
    color: var(--header-top-text);
}

.app-header-top .engine-select:hover,
.app-header-top .engine-select-wrapper--default .engine-select:hover,
.app-header-top .engine-select-wrapper--scramjet .engine-select:hover,
.app-header-top .engine-select-wrapper--puppeteer .engine-select:hover {
    filter: brightness(1.08);
    border-color: color-mix(in srgb, var(--header-top-text) 45%, transparent);
}

.app-header-toolbar .header-btn {
    border-radius: 999px;
    min-height: 30px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.app-header-toolbar .header-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.app-header-toolbar .header-btn span {
    font-size: 12px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    margin-left: -8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.mobile-menu-btn:hover {
    background: var(--bg-tertiary);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.header-left .logo,
.app-header-brand .logo {
    flex-shrink: 0;
    margin-right: 2px;
}

.header-controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* CAPTCHA Toggle */
.captcha-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.captcha-toggle-input {
    display: none;
}

.captcha-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s;
}

.captcha-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    top: 2px;
    left: 2px;
    transition: all 0.3s;
}

.captcha-toggle-input:checked+.captcha-toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
}

.captcha-toggle-input:checked+.captcha-toggle-slider::before {
    transform: translateX(20px);
    background: white;
}

.captcha-toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.captcha-toggle-input:checked~.captcha-toggle-text {
    color: var(--accent);
}

/* Anti-Bot Select */
.antibot-select-wrapper,
.engine-select-wrapper {
    display: flex;
    align-items: center;
}

.antibot-select,
.engine-select {
    padding: 3px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 86px;
    max-width: 110px;
}

.antibot-select:hover,
.engine-select:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.antibot-select:focus,
.engine-select:focus {
    outline: none;
    border-color: var(--accent);
}

.antibot-select option,
.engine-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Proxy engine: theme-native tints (accent / warning / purple — matches default, dark, red, light) */
.engine-select-wrapper--default .engine-select {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-tertiary));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    color: var(--text-primary);
    box-shadow: none;
}
.engine-select-wrapper--default .engine-select:hover {
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-hover));
    border-color: var(--accent);
}
.engine-select-wrapper--default .engine-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.engine-select-wrapper--scramjet .engine-select {
    background: color-mix(in srgb, var(--warning) 18%, var(--bg-tertiary));
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border-color));
    color: var(--text-primary);
    box-shadow: none;
}
.engine-select-wrapper--scramjet .engine-select:hover {
    background: color-mix(in srgb, var(--warning) 26%, var(--bg-hover));
    border-color: var(--warning);
}
.engine-select-wrapper--scramjet .engine-select:focus {
    border-color: var(--warning);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 38%, transparent);
}

.engine-select-wrapper--puppeteer .engine-select {
    background: color-mix(in srgb, var(--purple) 18%, var(--bg-tertiary));
    border-color: color-mix(in srgb, var(--purple) 38%, var(--border-color));
    color: var(--text-primary);
    box-shadow: none;
}
.engine-select-wrapper--puppeteer .engine-select:hover {
    background: color-mix(in srgb, var(--purple) 26%, var(--bg-hover));
    border-color: var(--purple);
}
.engine-select-wrapper--puppeteer .engine-select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 38%, transparent);
}


.header-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}
.header-btn svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.header-btn span {
    font-size: inherit;
}

.header-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.header-btn.logout-btn {
    color: var(--danger);
}

.header-btn.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
}

.header-btn#residentialIspToggleBtn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-btn#residentialIspToggleBtn.active {
    color: var(--danger);
    border-color: var(--danger);
}

.header-btn#residentialIspToggleBtn.active:hover {
    background: rgba(239, 68, 68, 0.1);
}

.header-btn#ipBlockToggleBtn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-btn#ipBlockToggleBtn.active {
    color: var(--danger);
    border-color: var(--danger);
}

.header-btn#ipBlockToggleBtn.active:hover {
    background: rgba(239, 68, 68, 0.1);
}

.header-btn#bitbToggleBtn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-btn#bitbToggleBtn.active {
    color: var(--accent);
    border-color: var(--accent);
}

.header-btn#bitbToggleBtn.active:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Compact deployed live domain (footer center on deployed panels) */
.deployed-domain-footer-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 12px;
    max-width: min(420px, 100%);
    min-width: 0;
    justify-self: center;
}

.deployed-domain-footer-status[hidden] {
    display: none !important;
}

.deployed-domain-footer-host,
#deployedDomainStatus #deployedDomainHostnameHeader {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(280px, 52vw);
}

.deployed-domain-footer-live,
#deployedDomainStatus #deployedDomainLiveDeadHeader {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Main Layout: header + app-main (sidebar + content-area) */
.app-main {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar: fixed width left; content-area fills remainder */
.sidebar {
    width: var(--shell-nav-w);
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 8px 0 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 10px 12px;
}

/* Grouped nav stacks — always expanded (non-collapsing labels) */
.nav-stack {
    margin-bottom: 6px;
}

.nav-stack-head {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.nav-stack-chevron {
    display: none;
}

.nav-stack-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    border-left: none;
    font-weight: 500;
    transition:
        background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:not(.nav-link--disabled):not(.nav-feature-locked):hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-link:not(.nav-link--disabled):not(.nav-feature-locked):hover svg {
    color: var(--accent);
}

.nav-link.active {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}

.nav-link.active svg {
    color: var(--accent);
}

.nav-link.active:not(.nav-link--disabled):hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-tertiary));
}

.nav-link.nav-link--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.nav-link.nav-link--disabled:hover {
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link:not(.nav-link--disabled):not(.nav-feature-locked):hover {
        animation: none;
        transform: translateX(2px);
    }

    .nav-link:not(.nav-link--disabled):not(.nav-feature-locked):hover svg {
        transform: none;
        filter: none;
    }
}

/* Content Area: right side of app-main; same for all tabs */
.content-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 40px 48px;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.view {
    display: none;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    flex: 0 0 auto;
    order: 2;
}

/* Active view: bring to front of flex order and ensure it’s visible (not behind header/sidebar) */
.view.active {
    display: block;
    order: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    align-self: stretch;
}

/* Payload view: same layout as other tabs so content sits in right panel, not under header */
#payloadView .settings-form {
    margin-top: 0;
}

.view-header {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Keep title + subtitle grouped on the left when no view-actions (avoids card floating right) */
.view-header-inner {
    flex: 1;
    min-width: 0;
}

.view-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.view-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

.view-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

/* Overview: six equal columns, one row (compact “strip” cards ~80px tall) */
.stats-grid-overview {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 28px;
    align-items: stretch;
}

.stats-grid-overview .stat-card {
    padding: 10px 12px;
    gap: 10px;
    min-height: 80px;
    box-sizing: border-box;
    align-items: center;
}

.stats-grid-overview .stat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.stats-grid-overview .stat-icon svg {
    width: 18px;
    height: 18px;
}

.stats-grid-overview .stat-content {
    min-width: 0;
    flex: 1;
}

.stats-grid-overview .stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.1;
}

.stats-grid-overview .stat-label {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

:root.light-theme .stat-card {
    border: 1px solid var(--border-color);
}

.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

.stat-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-icon-red {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.stat-icon-purple {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

.stat-label-with-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stat-card .level0-hits-tip {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

#credentialSummaryCards.summary-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

#credentialSummaryCards .summary-card--compact {
    padding: 10px 12px;
    gap: 8px;
}

#credentialSummaryCards .summary-card--compact h4 {
    font-size: 13px;
    line-height: 1.25;
    margin: 0;
}

#credentialSummaryCards .summary-card-total {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

#credentialSummaryCards .summary-metrics {
    gap: 8px;
}

#credentialSummaryCards .summary-metric--clickable {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

#credentialSummaryCards .summary-metric--clickable:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

#credentialSummaryCards .summary-metric--clickable label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
    pointer-events: none;
}

#credentialSummaryCards .summary-metric-valid {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
}

#credentialSummaryCards .summary-metric-invalid {
    font-size: 14px;
    font-weight: 600;
    color: var(--danger);
}

.summary-grid,
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease;
}

:root.light-theme .summary-card {
    border: 1px solid var(--border-color);
}

.summary-card:hover {
    border-color: var(--accent);
}

.summary-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-metrics {
    display: flex;
    gap: 12px;
}

.summary-metric {
    flex: 1;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.summary-metric label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.summary-metric span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.status-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.status-muted {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted);
}

.status-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.terminal-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: min(52vh, 480px);
}

.terminal-output {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    flex: 1 1 auto;
    min-height: min(48vh, 440px);
    max-height: min(70vh, 640px);
    overflow-y: auto;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-output .dash3d-mta-log-line {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 0 0 2px 0;
}

.terminal-output .dash3d-mta-log-line--err {
    color: var(--danger);
    font-weight: 600;
}

/* 3D MTA — same section/tab patterns as Deployment */
#threeDMtaView .mta-view-section.section,
#threeDMtaView .deployment-view-section.section {
    padding: 16px 18px;
    margin-bottom: 12px;
}

#threeDMtaView .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#threeDMtaView .mta-terminal-frame,
#dash3dMta_activityLogModal .mta-terminal-frame {
    display: flex;
    flex-direction: column;
    height: 360px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

#dash3dMta_activityLogModal .mta-terminal-frame--modal,
#dash3dRmm_activityLogModal .mta-terminal-frame--modal,
#dash3dBrowser_publishModal .mta-terminal-frame--modal {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none;
    border-radius: 0;
}

#dash3dRmm_activityLogModal.active,
#dash3dMta_activityLogModal.active,
#dash3dBrowser_publishConfirmModal.active,
#dash3dBrowser_publishModal.active {
    z-index: 10001 !important;
}

#dash3dRmm_activityLogModal .modal-content,
#dash3dMta_activityLogModal .modal-content,
#dash3dBrowser_publishModal .modal-content {
    max-height: 90vh;
    height: min(90vh, 720px);
    min-height: 420px;
    overflow: hidden;
}

#dash3dRmm_activityLogModal .modal-body,
#dash3dMta_activityLogModal .modal-body,
#dash3dBrowser_publishModal .modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#threeDMtaView .mta-terminal-header,
#dash3dMta_activityLogModal .mta-terminal-header,
#dash3dRmm_activityLogModal .mta-terminal-header,
#dash3dBrowser_publishModal .mta-terminal-header {
    background: var(--bg-secondary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#threeDMtaView .mta-terminal-body,
#dash3dMta_activityLogModal .mta-terminal-body,
#dash3dRmm_activityLogModal .mta-terminal-body,
#dash3dBrowser_publishModal .mta-terminal-body {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 10px 12px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a #161616;
}

#deploymentActivityModal .modal-content {
    max-width: 1000px;
    width: min(1000px, 96vw);
    height: min(90vh, 760px);
    min-height: min(72vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#deploymentActivityModal .modal-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#deploymentActivityLog,
#deploymentLogs {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.deployment-terminal-panel {
    display: flex;
    flex-direction: column;
    height: min(62vh, 580px);
    min-height: min(48vh, 420px);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

#threeDMtaView .mta-terminal-body::-webkit-scrollbar,
#dash3dMta_activityLogModal .mta-terminal-body::-webkit-scrollbar,
#dash3dRmm_activityLogModal .mta-terminal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#threeDMtaView .mta-terminal-body::-webkit-scrollbar-track,
#dash3dMta_activityLogModal .mta-terminal-body::-webkit-scrollbar-track,
#dash3dRmm_activityLogModal .mta-terminal-body::-webkit-scrollbar-track {
    background: #161616;
    border-radius: 4px;
}

#threeDMtaView .mta-terminal-body::-webkit-scrollbar-thumb,
#dash3dMta_activityLogModal .mta-terminal-body::-webkit-scrollbar-thumb,
#dash3dRmm_activityLogModal .mta-terminal-body::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
    border: 2px solid #161616;
    background-clip: padding-box;
}

#threeDMtaView .mta-terminal-body::-webkit-scrollbar-thumb:hover,
#dash3dMta_activityLogModal .mta-terminal-body::-webkit-scrollbar-thumb:hover,
#dash3dRmm_activityLogModal .mta-terminal-body::-webkit-scrollbar-thumb:hover {
    background: #5e5e5e;
}

#threeDMtaView .mta-terminal-body::-webkit-scrollbar-corner,
#dash3dMta_activityLogModal .mta-terminal-body::-webkit-scrollbar-corner,
#dash3dRmm_activityLogModal .mta-terminal-body::-webkit-scrollbar-corner {
    background: #161616;
}

#threeDMtaView .mta-terminal-placeholder,
#dash3dMta_activityLogModal .mta-terminal-placeholder,
#dash3dRmm_activityLogModal .mta-terminal-placeholder,
#dash3dBrowser_publishModal .mta-terminal-placeholder {
    color: #6a6a6a;
    font-style: italic;
}

#threeDMtaView .mta-terminal-line,
#dash3dMta_activityLogModal .mta-terminal-line,
#dash3dRmm_activityLogModal .mta-terminal-line,
#dash3dBrowser_publishModal .mta-terminal-line {
    margin: 0 0 3px;
    padding: 0;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
}

#threeDMtaView .mta-terminal-line--local,
#dash3dMta_activityLogModal .mta-terminal-line--local,
#dash3dRmm_activityLogModal .mta-terminal-line--local,
#dash3dBrowser_publishModal .mta-terminal-line--local {
    color: #9cdcfe;
}

#threeDMtaView .mta-terminal-line--ok,
#dash3dMta_activityLogModal .mta-terminal-line--ok,
#dash3dRmm_activityLogModal .mta-terminal-line--ok,
#dash3dBrowser_publishModal .mta-terminal-line--ok {
    color: #89d185;
}

#threeDMtaView .mta-terminal-line--err,
#dash3dMta_activityLogModal .mta-terminal-line--err,
#dash3dRmm_activityLogModal .mta-terminal-line--err,
#dash3dBrowser_publishModal .mta-terminal-line--err {
    color: #f48771;
}

#threeDMtaView .mta-terminal-line--meta,
#dash3dMta_activityLogModal .mta-terminal-line--meta,
#dash3dRmm_activityLogModal .mta-terminal-line--meta,
#dash3dBrowser_publishModal .mta-terminal-line--meta {
    color: #6a9955;
    font-style: italic;
}

#threeDMtaView .status-pill.status-deploying {
    color: #dcdcaa;
    border-color: rgba(220, 220, 170, 0.45);
    background: rgba(220, 220, 170, 0.12);
    animation: mta-deploying-pulse 1.6s ease-in-out infinite;
}

#threeDMtaView .status-pill.status-syncing {
    color: #9cdcfe;
    border-color: rgba(156, 220, 254, 0.45);
    background: rgba(156, 220, 254, 0.12);
    animation: mta-deploying-pulse 1.6s ease-in-out infinite;
}

@keyframes mta-deploying-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

#threeDMtaView .mta-smtp-readout , .dash3d-mta-modal-root .mta-smtp-readout {
    font-family: inherit;
    font-size: 13px;
    margin-bottom: 12px;
}

#threeDMtaView .mta-smtp-readout--empty , .dash3d-mta-modal-root .mta-smtp-readout--empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    line-height: 1.5;
}

#threeDMtaView .mta-smtp-readout--card , .dash3d-mta-modal-root .mta-smtp-readout--card {
    padding: 0;
    background: transparent;
    border: none;
}

#threeDMtaView .mta-smtp-card , .dash3d-mta-modal-root .mta-smtp-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

#threeDMtaView .mta-smtp-card-head , .dash3d-mta-modal-root .mta-smtp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary, var(--bg-tertiary)) 70%, transparent);
}

#threeDMtaView .mta-smtp-card-title , .dash3d-mta-modal-root .mta-smtp-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

#threeDMtaView .mta-smtp-card-badge , .dash3d-mta-modal-root .mta-smtp-card-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

#threeDMtaView .mta-smtp-card-grid , .dash3d-mta-modal-root .mta-smtp-card-grid {
    display: grid;
    gap: 0;
}

#threeDMtaView .mta-smtp-row , .dash3d-mta-modal-root .mta-smtp-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
}

#threeDMtaView .mta-smtp-row:last-child , .dash3d-mta-modal-root .mta-smtp-row:last-child {
    border-bottom: none;
}

#threeDMtaView .mta-smtp-label , .dash3d-mta-modal-root .mta-smtp-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

#threeDMtaView .mta-smtp-value , .dash3d-mta-modal-root .mta-smtp-value {
    display: block;
    font-family: 'Fira Code', 'SF Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-primary);
    word-break: break-all;
    padding: 6px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-primary, #0d1117) 35%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

#threeDMtaView .mta-smtp-value--secret , .dash3d-mta-modal-root .mta-smtp-value--secret {
    color: var(--warning, #d29922);
}

#threeDMtaView .mta-smtp-mailboxes , .dash3d-mta-modal-root .mta-smtp-mailboxes {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary, #0d1117) 20%, transparent);
}

#threeDMtaView .mta-smtp-mailboxes-title , .dash3d-mta-modal-root .mta-smtp-mailboxes-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

#threeDMtaView .mta-smtp-mailboxes-hint , .dash3d-mta-modal-root .mta-smtp-mailboxes-hint {
    font-weight: 400;
    color: var(--text-muted);
}

#threeDMtaView .mta-smtp-mailbox-list , .dash3d-mta-modal-root .mta-smtp-mailbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#threeDMtaView .mta-smtp-mailbox-list li code , .dash3d-mta-modal-root .mta-smtp-mailbox-list li code {
    display: inline-block;
    font-family: 'Fira Code', 'SF Mono', 'Courier New', monospace;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-primary, #0d1117) 35%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    color: var(--text-primary);
}

#threeDMtaView .mta-domain-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

#threeDMtaView .summary-metric--imap {
    grid-column: 1 / -1;
}

#threeDMtaView .mta-imap-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

#threeDMtaView .mta-imap-status-text.mta-imap--ready {
    color: var(--success);
    font-weight: 600;
}

#threeDMtaView .mta-imap-status-text.mta-imap--warn {
    color: var(--warning, #e3b341);
}

#threeDMtaView .mta-imap-status-text.mta-imap--err {
    color: var(--danger);
}

#threeDMtaView .mta-inbox-tab-badge,
#threeDMtaView .mta-inbox-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--danger, #ef4444);
    color: #fff;
    vertical-align: middle;
}

#threeDMtaView .mta-inbox-tab-badge[hidden],
#threeDMtaView .mta-inbox-count-badge[hidden] {
    display: none !important;
}

#threeDMtaView .mta-inbox-count-badge {
    margin-left: 8px;
}

#threeDMtaView .mta-inbox-notify-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

#threeDMtaView .mta-inbox-notify-pill[hidden] {
    display: none !important;
}

#threeDMtaView .mta-deliv-fix-status--loading , .dash3d-mta-modal-root .mta-deliv-fix-status--loading {
    color: var(--text-muted, #9aa0a6);
}

#threeDMtaView .mta-deliv-fix-status--ok , .dash3d-mta-modal-root .mta-deliv-fix-status--ok {
    color: var(--success, #34d399);
    font-weight: 600;
}

#threeDMtaView .mta-deliv-fix-status--warn , .dash3d-mta-modal-root .mta-deliv-fix-status--warn {
    color: var(--warning, #e3b341);
    font-weight: 600;
}

#threeDMtaView .mta-deliv-fix-status--err , .dash3d-mta-modal-root .mta-deliv-fix-status--err {
    color: var(--danger, #f87171);
    font-weight: 600;
}

#threeDMtaView #dash3dMta_btnInstallImap.is-loading {
    pointer-events: none;
    opacity: 0.85;
    position: relative;
    padding-left: 28px;
}

#threeDMtaView .mta-warmup-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

#threeDMtaView .mta-warmup-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

#threeDMtaView .mta-warmup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

#threeDMtaView .mta-warmup-badge--running {
    position: relative;
    background: rgba(46, 160, 67, 0.15);
    color: var(--success, #3fb950);
    box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.25);
}

#threeDMtaView .mta-warmup-badge--running::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: mta-warmup-pulse 1.6s ease-in-out infinite;
}

@keyframes mta-warmup-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.72); }
}

#threeDMtaView .mta-warmup-badge--stopped {
    background: rgba(139, 148, 158, 0.12);
    color: var(--text-muted, #8b949e);
    box-shadow: 0 0 0 1px var(--border-color);
}

#threeDMtaView .mta-warmup-badge--stopped svg {
    width: 16px;
    height: 16px;
}

#threeDMtaView .mta-warmup-badge--busy {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent, #238636);
    border-radius: 50%;
    animation: mta-warmup-spin 0.7s linear infinite;
}

@keyframes mta-warmup-spin {
    to { transform: rotate(360deg); }
}

#threeDMtaView .mta-warmup-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}

#threeDMtaView .mta-warmup-round-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

#threeDMtaView .mta-warmup-round-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#threeDMtaView .mta-warmup-round-btn--play {
    width: 36px;
    height: 36px;
    background: #22c55e;
    color: #fff;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.45);
}

#threeDMtaView .mta-warmup-round-btn--play svg {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

#threeDMtaView .mta-warmup-round-btn--play:hover:not(:disabled) {
    background: #16a34a;
    box-shadow: 0 3px 14px rgba(34, 197, 94, 0.55);
}

#threeDMtaView .mta-warmup-round-btn--stop {
    width: 24px;
    height: 24px;
    background: rgba(248, 81, 73, 0.12);
    color: var(--danger, #f85149);
    box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.3);
}

#threeDMtaView .mta-warmup-round-btn--stop svg {
    width: 10px;
    height: 10px;
}

#threeDMtaView .mta-warmup-round-btn--stop:hover:not(:disabled) {
    background: rgba(248, 81, 73, 0.22);
}

#threeDMtaView .mta-domain-map-section {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--card-bg, rgba(255, 255, 255, 0.02));
}

#threeDMtaView .mta-domain-map-section .section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#threeDMtaView .mta-domain-pool {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 28px;
}

#threeDMtaView .mta-domain-pool .mta-domain-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(88, 166, 255, 0.12);
    border: 1px solid rgba(88, 166, 255, 0.25);
    color: inherit;
}

#threeDMtaView .mta-domain-map-table-wrap {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
}

#threeDMtaView .mta-domain-map-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#threeDMtaView .mta-domain-map-table th,
#threeDMtaView .mta-domain-map-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    vertical-align: middle;
}

#threeDMtaView .mta-domain-map-table th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    background: rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1;
}

#threeDMtaView .mta-domain-map-table tbody tr:last-child td {
    border-bottom: none;
}

#threeDMtaView .mta-domain-map-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

#threeDMtaView .mta-domain-map-table code {
    font-size: 12px;
    white-space: nowrap;
}

#threeDMtaView .mta-domain-map-select {
    min-width: 200px;
    width: 100%;
    max-width: 360px;
}

#threeDMtaView .mta-domain-map-main-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(88, 166, 255, 0.18);
    color: var(--accent-color, #58a6ff);
}

#threeDMtaView .mta-domain-map-main-pill--empty {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    opacity: 0.55;
    font-weight: 500;
}

#threeDMtaView .mta-domain-map-loading {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
}

#threeDMtaView .mta-domain-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

#threeDMtaView .mta-domain-map-hint {
    margin: 0;
    font-size: 12px;
    max-width: 520px;
}

#threeDMtaView .mta-domain-map-readonly {
    font-weight: 500;
}

#threeDMtaView .mta-domain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

#threeDMtaView .mta-domain-chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
    color: var(--text-primary, #e6edf3);
}

#threeDMtaView .mta-domain-chip--removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 4px;
}

#threeDMtaView .mta-domain-chip-remove {
    border: none;
    background: transparent;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.95rem;
    line-height: 1;
}

#threeDMtaView .mta-domain-chip-remove:hover {
    color: var(--text-primary, #e6edf3);
}

#threeDMtaView .mta-domain-chip--hub {
    border-color: var(--accent, #238636);
    background: rgba(35, 134, 54, 0.12);
}

#threeDMtaView .mta-add-domains-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
}

#threeDMtaView .mta-add-domain-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}

#threeDMtaView .mta-add-domain-row:hover {
    background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
}

#threeDMtaView .mta-add-domain-row input {
    flex-shrink: 0;
}

#threeDMtaView .mta-warmup-stats-modal .modal-header {
    align-items: flex-start;
}

#threeDMtaView .mta-warmup-stats-body {
    min-height: 200px;
}

#threeDMtaView .mta-warmup-stats-loading,
#threeDMtaView .mta-warmup-stats-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--text-muted, #8b949e);
}

#threeDMtaView .mta-warmup-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 720px) {
    #threeDMtaView .mta-warmup-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

#threeDMtaView .mta-warmup-kpi {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
}

#threeDMtaView .mta-warmup-kpi label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #8b949e);
    margin-bottom: 6px;
}

#threeDMtaView .mta-warmup-kpi strong {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary, #e6edf3);
}

#threeDMtaView .mta-warmup-kpi span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #8b949e);
    margin-top: 4px;
}

#threeDMtaView .mta-warmup-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

#threeDMtaView .mta-warmup-period-tabs {
    display: flex;
    gap: 6px;
}

#threeDMtaView .mta-warmup-period-tabs .btn.active {
    background: var(--accent, #238636);
    border-color: var(--accent, #238636);
    color: #fff;
}

#threeDMtaView .mta-warmup-chart-panel {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 12px 8px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.02));
    margin-bottom: 14px;
    min-height: 220px;
}

#threeDMtaView .mta-warmup-chart-panel canvas {
    width: 100% !important;
    max-height: 280px;
}

#threeDMtaView .mta-warmup-chart-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 800px) {
    #threeDMtaView .mta-warmup-chart-split {
        grid-template-columns: 1fr;
    }
}

#threeDMtaView .mta-warmup-chart-panel--half {
    min-height: 200px;
}

#threeDMtaView .mta-warmup-chart-title {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #8b949e);
}

#threeDMtaView #dash3dMta_btnInstallImap.is-loading .mta-imap-btn-label::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: mta-imap-spin 0.7s linear infinite;
}

@keyframes mta-imap-spin {
    to { transform: rotate(360deg); }
}

#threeDMtaView .mta-deliv-summary , .dash3d-mta-modal-root .mta-deliv-summary {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

#threeDMtaView .mta-deliv-summary--empty , .dash3d-mta-modal-root .mta-deliv-summary--empty {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

#threeDMtaView .mta-deliv-summary--ok , .dash3d-mta-modal-root .mta-deliv-summary--ok {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border-color));
    background: color-mix(in srgb, var(--success) 10%, var(--bg-tertiary));
}

#threeDMtaView .mta-deliv-summary--warn , .dash3d-mta-modal-root .mta-deliv-summary--warn {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border-color));
    background: color-mix(in srgb, var(--warning) 10%, var(--bg-tertiary));
}

#threeDMtaView .mta-deliv-summary--err , .dash3d-mta-modal-root .mta-deliv-summary--err {
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border-color));
    background: color-mix(in srgb, var(--danger) 12%, var(--bg-tertiary));
}

#threeDMtaView .mta-deliv-summary-top , .dash3d-mta-modal-root .mta-deliv-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

#threeDMtaView .mta-deliv-summary-kicker , .dash3d-mta-modal-root .mta-deliv-summary-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

#threeDMtaView .mta-deliv-summary-badge , .dash3d-mta-modal-root .mta-deliv-summary-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

#threeDMtaView .mta-deliv-summary-badge--ok , .dash3d-mta-modal-root .mta-deliv-summary-badge--ok {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 50%, transparent);
    background: color-mix(in srgb, var(--success) 18%, transparent);
}

#threeDMtaView .mta-deliv-summary-badge--warn , .dash3d-mta-modal-root .mta-deliv-summary-badge--warn {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 50%, transparent);
    background: color-mix(in srgb, var(--warning) 18%, transparent);
}

#threeDMtaView .mta-deliv-summary-badge--err , .dash3d-mta-modal-root .mta-deliv-summary-badge--err {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}

#threeDMtaView .mta-deliv-summary-title , .dash3d-mta-modal-root .mta-deliv-summary-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

#threeDMtaView .mta-deliv-summary--ok .mta-deliv-summary-title , .dash3d-mta-modal-root .mta-deliv-summary--ok .mta-deliv-summary-title {
    color: var(--success);
}

#threeDMtaView .mta-deliv-summary--warn .mta-deliv-summary-title , .dash3d-mta-modal-root .mta-deliv-summary--warn .mta-deliv-summary-title {
    color: var(--warning);
}

#threeDMtaView .mta-deliv-summary--err .mta-deliv-summary-title , .dash3d-mta-modal-root .mta-deliv-summary--err .mta-deliv-summary-title {
    color: var(--danger);
}

#threeDMtaView .mta-deliv-summary-time , .dash3d-mta-modal-root .mta-deliv-summary-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

#threeDMtaView .mta-deliv-toolbar , .dash3d-mta-modal-root .mta-deliv-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

#threeDMtaView .mta-deliv-toolbar label , .dash3d-mta-modal-root .mta-deliv-toolbar label {
    font-size: 12px;
    color: var(--text-muted, #8b949e);
    white-space: nowrap;
}

#threeDMtaView .mta-deliv-toolbar .form-input , .dash3d-mta-modal-root .mta-deliv-toolbar .form-input {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
}

#threeDMtaView .mta-deliv-summary-ratio , .dash3d-mta-modal-root .mta-deliv-summary-ratio {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--text-primary, #e6edf3);
}

#threeDMtaView .mta-deliv-provider-grid , .dash3d-mta-modal-root .mta-deliv-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

#threeDMtaView .mta-deliv-provider , .dash3d-mta-modal-root .mta-deliv-provider {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary, #161b22);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

#threeDMtaView .mta-deliv-provider:hover , .dash3d-mta-modal-root .mta-deliv-provider:hover {
    border-color: var(--accent, #238636);
}

#threeDMtaView .mta-deliv-provider--active , .dash3d-mta-modal-root .mta-deliv-provider--active {
    border-color: var(--accent, #238636);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
}

#threeDMtaView .mta-deliv-provider-name , .dash3d-mta-modal-root .mta-deliv-provider-name {
    font-size: 11px;
    color: var(--text-muted, #8b949e);
    line-height: 1.2;
}

#threeDMtaView .mta-deliv-provider-pct , .dash3d-mta-modal-root .mta-deliv-provider-pct {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

#threeDMtaView .mta-deliv-provider-pct--ok , .dash3d-mta-modal-root .mta-deliv-provider-pct--ok { color: var(--success, #3fb950); }
#threeDMtaView .mta-deliv-provider-pct--warn , .dash3d-mta-modal-root .mta-deliv-provider-pct--warn { color: var(--warning, #d29922); }
#threeDMtaView .mta-deliv-provider-pct--err , .dash3d-mta-modal-root .mta-deliv-provider-pct--err { color: var(--danger, #f85149); }

#threeDMtaView .mta-deliv-provider-hint , .dash3d-mta-modal-root .mta-deliv-provider-hint {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #8b949e);
}

#threeDMtaView .mta-deliv-fixes , .dash3d-mta-modal-root .mta-deliv-fixes {
    margin-bottom: 14px;
}

#threeDMtaView .mta-deliv-fixes-title , .dash3d-mta-modal-root .mta-deliv-fixes-title {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

#threeDMtaView .mta-deliv-fix-card , .dash3d-mta-modal-root .mta-deliv-fix-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-secondary, #161b22);
}

#threeDMtaView .mta-deliv-fix-card--high , .dash3d-mta-modal-root .mta-deliv-fix-card--high {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border-color));
}

#threeDMtaView .mta-deliv-fix-head , .dash3d-mta-modal-root .mta-deliv-fix-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

#threeDMtaView .mta-deliv-fix-domain , .dash3d-mta-modal-root .mta-deliv-fix-domain {
    font-size: 11px;
    color: var(--text-muted, #8b949e);
}

#threeDMtaView .mta-deliv-fix-steps , .dash3d-mta-modal-root .mta-deliv-fix-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-primary, #e6edf3);
}

#threeDMtaView .mta-deliv-fix-steps li , .dash3d-mta-modal-root .mta-deliv-fix-steps li {
    margin-bottom: 4px;
}

#threeDMtaView .mta-deliv-summary-note , .dash3d-mta-modal-root .mta-deliv-summary-note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

#threeDMtaView .dash3d-mta-deliv-grid , .dash3d-mta-modal-root .dash3d-mta-deliv-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

#threeDMtaView .dash3d-mta-deliv-grid--empty , .dash3d-mta-modal-root .dash3d-mta-deliv-grid--empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 12px 0;
}

#threeDMtaView .dash3d-mta-deliv-section , .dash3d-mta-modal-root .dash3d-mta-deliv-section {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
}

#threeDMtaView .dash3d-mta-deliv-group-title , .dash3d-mta-modal-root .dash3d-mta-deliv-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

#threeDMtaView .dash3d-mta-deliv-group-sub , .dash3d-mta-modal-root .dash3d-mta-deliv-group-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    margin-bottom: 10px;
}

#threeDMtaView .dash3d-mta-deliv-metrics-row , .dash3d-mta-modal-root .dash3d-mta-deliv-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

#threeDMtaView .dash3d-mta-metric , .dash3d-mta-modal-root .dash3d-mta-metric {
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-left-width: 3px;
}

#threeDMtaView .dash3d-mta-metric--ok , .dash3d-mta-modal-root .dash3d-mta-metric--ok {
    border-left-color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--bg-tertiary));
}

#threeDMtaView .dash3d-mta-metric--warn , .dash3d-mta-modal-root .dash3d-mta-metric--warn {
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 8%, var(--bg-tertiary));
}

#threeDMtaView .dash3d-mta-metric--err , .dash3d-mta-modal-root .dash3d-mta-metric--err {
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-tertiary));
}

#threeDMtaView .dash3d-mta-metric-head , .dash3d-mta-modal-root .dash3d-mta-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

#threeDMtaView .dash3d-mta-metric-label , .dash3d-mta-modal-root .dash3d-mta-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#threeDMtaView .dash3d-mta-metric-badge , .dash3d-mta-modal-root .dash3d-mta-metric-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

#threeDMtaView .dash3d-mta-metric-badge--ok , .dash3d-mta-modal-root .dash3d-mta-metric-badge--ok {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 20%, transparent);
}

#threeDMtaView .dash3d-mta-metric-badge--warn , .dash3d-mta-modal-root .dash3d-mta-metric-badge--warn {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 22%, transparent);
}

#threeDMtaView .dash3d-mta-metric-badge--err , .dash3d-mta-modal-root .dash3d-mta-metric-badge--err {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 22%, transparent);
}

#threeDMtaView .dash3d-mta-metric-value , .dash3d-mta-modal-root .dash3d-mta-metric-value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
}

#threeDMtaView .dash3d-mta-metric--ok .dash3d-mta-metric-value , .dash3d-mta-modal-root .dash3d-mta-metric--ok .dash3d-mta-metric-value {
    color: var(--success);
}

#threeDMtaView .dash3d-mta-metric--warn .dash3d-mta-metric-value , .dash3d-mta-modal-root .dash3d-mta-metric--warn .dash3d-mta-metric-value {
    color: var(--warning);
}

#threeDMtaView .dash3d-mta-metric--err .dash3d-mta-metric-value , .dash3d-mta-modal-root .dash3d-mta-metric--err .dash3d-mta-metric-value {
    color: var(--danger);
}

#threeDMtaView .dash3d-mta-metric-detail , .dash3d-mta-modal-root .dash3d-mta-metric-detail {
    font-size: 11px;
    font-family: 'Courier New', Consolas, monospace;
    color: var(--text-muted);
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-primary) 60%, transparent);
    word-break: break-word;
    line-height: 1.4;
}

#threeDMtaView .dash3d-mta-metric--ok .dash3d-mta-metric-detail , .dash3d-mta-modal-root .dash3d-mta-metric--ok .dash3d-mta-metric-detail {
    color: color-mix(in srgb, var(--success) 75%, var(--text-muted));
}

#threeDMtaView .dash3d-mta-metric--warn .dash3d-mta-metric-detail , .dash3d-mta-modal-root .dash3d-mta-metric--warn .dash3d-mta-metric-detail {
    color: color-mix(in srgb, var(--warning) 80%, var(--text-muted));
}

#threeDMtaView .dash3d-mta-metric--err .dash3d-mta-metric-detail , .dash3d-mta-modal-root .dash3d-mta-metric--err .dash3d-mta-metric-detail {
    color: color-mix(in srgb, var(--danger) 80%, var(--text-muted));
}

#threeDMtaView .dash3d-mta-deliv-metrics-row--stacked , .dash3d-mta-modal-root .dash3d-mta-deliv-metrics-row--stacked {
    grid-template-columns: 1fr;
}

#threeDMtaView .dash3d-mta-metric--wide , .dash3d-mta-modal-root .dash3d-mta-metric--wide {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#threeDMtaView .dash3d-mta-metric--has-list , .dash3d-mta-modal-root .dash3d-mta-metric--has-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

#threeDMtaView .dash3d-mta-metric-detail--has-list , .dash3d-mta-modal-root .dash3d-mta-metric-detail--has-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    padding: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-primary) 60%, transparent);
}

#threeDMtaView .dash3d-mta-metric-detail-caption , .dash3d-mta-modal-root .dash3d-mta-metric-detail-caption {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, #333) 65%, transparent);
    color: inherit;
    font-family: inherit;
}

#threeDMtaView .dash3d-mta-metric-detail--has-list .dash3d-mta-metric-list , .dash3d-mta-modal-root .dash3d-mta-metric-detail--has-list .dash3d-mta-metric-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    background: transparent;
}

#threeDMtaView .dash3d-mta-metric-list li , .dash3d-mta-modal-root .dash3d-mta-metric-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.35;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, #333) 70%, transparent);
}

#threeDMtaView .dash3d-mta-metric-list li:last-child , .dash3d-mta-modal-root .dash3d-mta-metric-list li:last-child {
    border-bottom: none;
}

#threeDMtaView .dash3d-mta-metric-list-item--tier1 , .dash3d-mta-modal-root .dash3d-mta-metric-list-item--tier1 {
    background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent);
}

#threeDMtaView .dash3d-mta-metric-list-name , .dash3d-mta-modal-root .dash3d-mta-metric-list-name {
    font-weight: 600;
    color: var(--text-primary);
}

#threeDMtaView .dash3d-mta-metric-list-zone , .dash3d-mta-modal-root .dash3d-mta-metric-list-zone {
    font-size: 10px;
    color: var(--text-muted);
    word-break: break-all;
}

#threeDMtaView .dash3d-mta-bl-table-wrap {
    margin-top: 10px;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

#threeDMtaView .dash3d-mta-bl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

#threeDMtaView .dash3d-mta-bl-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

#threeDMtaView .dash3d-mta-bl-table td {
    padding: 6px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    vertical-align: top;
}

#threeDMtaView .dash3d-mta-bl-table tr:last-child td {
    border-bottom: none;
}

#threeDMtaView .dash3d-mta-bl-row--listed {
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
}

#threeDMtaView .dash3d-mta-bl-row--listed .dash3d-mta-bl-status {
    color: var(--danger);
    font-weight: 700;
}

#threeDMtaView .dash3d-mta-bl-row--timeout .dash3d-mta-bl-status {
    color: var(--warning);
}

#threeDMtaView .dash3d-mta-bl-status {
    font-weight: 600;
    white-space: nowrap;
    width: 72px;
}

#threeDMtaView .dash3d-mta-bl-zone {
    font-size: 10px;
    color: var(--text-muted);
    word-break: break-all;
}

#threeDMtaView tr.mta-row-selected td {
    background: color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent);
}

#threeDMtaView .mta-server-row .deployment-row-main {
    cursor: pointer;
}

#threeDMtaView .dash3d-mta-ip-box,
#threeDMtaView .dash3d-mta-sat-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 36px;
    background: var(--bg-tertiary);
}

.terminal-input-group {
    display: flex;
    gap: 8px;
}

.terminal-input-group .form-input {
    flex: 1;
}

/* Sections */
.section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 28px 32px;
}

.section-header {
    margin-bottom: 20px;
}

.section-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.45;
}

/* Marketplace: separate stat cards and section blocks */
#marketplaceView .section.marketplace-section-spaced {
    margin-bottom: 1rem;
}

#marketplaceView .section.marketplace-section-spaced:last-child {
    margin-bottom: 0;
}

#marketplaceView .section {
    padding: 16px 18px;
}

#marketplaceView .section-header {
    margin-bottom: 12px;
}

#marketplaceView .section-header h3 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
}

#marketplaceView .section-header h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
}

.mp-section-lead {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

.mp-inline-help {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.mp-inline-help summary {
    cursor: pointer;
    color: var(--accent, #60a5fa);
    user-select: none;
}

.mp-inline-help[open] summary {
    margin-bottom: 6px;
}

.marketplace-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 10px 0 12px;
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(to bottom, var(--bg-primary, #0b0f14) 70%, transparent);
    border-bottom: 1px solid var(--border-color);
}

.marketplace-subtabs button {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary, #9ca3af);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.marketplace-subtabs button:hover {
    color: var(--text-primary);
    border-color: var(--accent, #3b82f6);
}

.marketplace-subtabs button.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--text-primary);
}

.marketplace-tab-panel {
    display: none;
    animation: mpFadeIn 0.15s ease;
}

.marketplace-tab-panel.active {
    display: block;
}

@keyframes mpFadeIn {
    from {
        opacity: 0.85;
    }
    to {
        opacity: 1;
    }
}

#marketplaceView .marketplace-stats-grid {
    gap: 14px !important;
    row-gap: 14px !important;
    margin-bottom: 1rem !important;
}

#marketplaceView .marketplace-stats-grid .stat-card {
    padding: 14px 16px !important;
}

#marketplaceView .marketplace-stats-grid .stat-card > div:last-child {
    font-size: 22px !important;
}

.marketplace-view-header {
    margin-bottom: 0.75rem !important;
}

@media (max-width: 900px) {
    #marketplaceView .marketplace-support-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-marketplace-ops .marketplace-support-grid {
        grid-template-columns: 1fr !important;
    }
    .marketplace-subtabs button {
        flex: 1 1 auto;
        min-width: calc(50% - 4px);
        justify-content: center;
    }
}

/* Compact labels + ? tooltips (title = native tooltip) */
.label-with-help {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.label-with-help label,
.label-with-help .label-text-like,
.label-with-help h3,
.label-with-help h4 {
    margin: 0;
}

.section-heading-inline {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.45;
}

.label-text-like {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

button.help-tip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.2));
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
}

button.help-tip:hover,
button.help-tip:focus-visible {
    color: var(--accent, #60a5fa);
    border-color: var(--accent, #60a5fa);
    outline: none;
}

.mp-ops-modal-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.mp-ops-compact .mp-ops-compact-row {
    align-items: flex-start;
}

@media (min-width: 640px) {
    .mp-ops-compact .mp-ops-compact-row {
        align-items: center;
    }
}

/* Charts Row */
.charts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.chart-header {
    margin-bottom: 12px;
}

.chart-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
}

.credentials-signal-chart {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 200px;
}

.credentials-signal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    width: 100%;
}

.credentials-signal-header {
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-start;
}

.credentials-signal-range {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.credentials-signal-range-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}

.credentials-signal-range-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong, rgba(255, 255, 255, 0.18));
}

.credentials-signal-range-btn.active {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.45);
}

.credentials-signal-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: baseline;
}

.credentials-signal-total span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.credentials-signal-total--valid {
    color: #10b981;
}

.credentials-signal-total--invalid {
    color: #ef4444;
    font-size: 16px;
    font-weight: 700;
}

.credentials-signal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

.credentials-signal-legend-item::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    margin-right: 5px;
    vertical-align: middle;
}

.credentials-signal-legend-item--valid::before {
    background: #10b981;
}

.credentials-signal-legend-item--invalid::before {
    background: #ef4444;
}

.credentials-signal-legend-item--ma::before {
    background: #f59e0b;
    height: 0;
    border-top: 2px dashed #f59e0b;
}

.credentials-signal-total {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.credentials-signal-delta {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.credentials-signal-delta.up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.credentials-signal-delta.down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.credentials-signal-delta.flat {
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

.credentials-signal-svg {
    width: 100%;
    height: 140px;
    display: block;
}

.ongoing-activities-panel {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 200px;
    max-height: 240px;
    overflow-y: auto;
}

.ongoing-activities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ongoing-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s, background 0.15s;
}

.ongoing-activity-row:hover {
    border-color: rgba(59, 130, 246, 0.45);
    background: var(--bg-secondary);
}

.ongoing-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: ongoingPulse 1.8s ease-out infinite;
}

@keyframes ongoingPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ongoing-activity-body {
    flex: 1;
    min-width: 0;
}

.ongoing-activity-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ongoing-activity-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ongoing-activity-kind {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ongoing-activity-progress {
    width: 44px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: #3b82f6;
    text-align: right;
}

.ongoing-activities-empty {
    width: 100%;
    text-align: center;
    padding: 28px 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.ongoing-activities-empty strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 6px;
}

.ongoing-activities-list--empty {
    position: relative;
}

.ongoing-activity-row--ghost {
    pointer-events: none;
    cursor: default;
    opacity: 0.55;
    border-style: dashed;
}

.ongoing-activity-row--ghost:hover {
    border-color: var(--border-color);
    background: var(--bg-tertiary);
}

.ongoing-activity-row--ghost .ongoing-activity-dot {
    background: var(--text-muted);
    animation: none;
    box-shadow: none;
    opacity: 0.35;
}

.ongoing-activity-skeleton-line {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: chartSkeletonShimmer 1.8s ease-in-out infinite;
}

.ongoing-activity-skeleton-line.title {
    width: 72%;
    margin-bottom: 6px;
}

.ongoing-activity-skeleton-line.detail {
    width: 48%;
    height: 6px;
    opacity: 0.7;
}

.ongoing-activity-row--ghost .ongoing-activity-kind,
.ongoing-activity-row--ghost .ongoing-activity-progress {
    opacity: 0.35;
}

.chart-empty-caption {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
}

.credentials-signal-wrap {
    position: relative;
    width: 100%;
}

.credentials-signal-wrap .chart-empty-caption {
    bottom: 22px;
}

.credentials-signal-svg--empty path.ghost-area {
    opacity: 0.2;
}

.credentials-signal-svg--empty path.ghost-line {
    opacity: 0.35;
}

@keyframes chartSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.map-container {
    min-height: 250px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.map-container>div:first-child {
    flex: 1;
    min-height: 250px;
    width: 100%;
    position: relative;
}

.map-container .leaflet-container {
    height: 100% !important;
    min-height: 250px !important;
    width: 100% !important;
    position: relative !important;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.activity-icon {
    width: 32px;
    height: 32px;
    background: var(--bg-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-content p {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.activity-time {
    font-size: 12px;
    color: var(--text-muted);
}

/* Country flag styling */
.country-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
    border: 1px solid var(--border-color);
    display: inline-block;
}

.cred-country-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dash3dBrowser-device-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash3dBrowser-device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.dash3dBrowser-device-row:last-child {
    border-bottom: none;
}

.local-flag,
.unknown-flag {
    display: inline-block;
    margin-right: 4px;
    font-size: 16px;
    vertical-align: middle;
}

/* Tables */
.table-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--bg-tertiary);
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
}

.cred-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.cred-actions .btn {
    margin: 0 !important;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cred-actions .cred-action-btn {
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11px;
    line-height: 1.15;
    min-height: 28px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Credentials tab — keep action buttons visible on narrow / RDP viewports */
#credentialsView .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#credentialsView .credentials-table {
    table-layout: fixed;
    width: 100%;
    min-width: 680px;
}

#credentialsView .credentials-table .cred-col-email {
    width: 22%;
    min-width: 120px;
}

#credentialsView .credentials-table .cred-col-password {
    width: 12%;
    min-width: 72px;
}

#credentialsView .credentials-table .cred-col-service {
    width: 12%;
    min-width: 72px;
}

#credentialsView .credentials-table .cred-col-country {
    width: 10%;
    min-width: 64px;
}

#credentialsView .credentials-table .cred-col-ts {
    width: 16%;
    min-width: 108px;
}

#credentialsView .credentials-table .cred-col-actions {
    width: 24%;
    min-width: 200px;
}

#credentialsView .credentials-table .cred-cell-email,
#credentialsView .credentials-table .cred-cell-password,
#credentialsView .credentials-table .cred-cell-service,
#credentialsView .credentials-table .cred-cell-ts {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

#credentialsView .credentials-table .cred-cell-email,
#credentialsView .credentials-table .cred-cell-password {
    word-break: normal;
}

#credentialsView .credentials-table thead .cred-col-actions,
#credentialsView .credentials-table tbody .cred-col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg-secondary);
    box-shadow: -6px 0 10px -4px rgba(0, 0, 0, 0.22);
}

#credentialsView .credentials-table thead .cred-col-actions {
    background: var(--bg-tertiary);
    z-index: 3;
}

#credentialsView .credentials-table tbody tr:hover .cred-col-actions {
    background: var(--bg-tertiary);
}

#credentialsView .view-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    flex: 1 1 280px;
}

#credentialsView .view-actions .tabs {
    flex-wrap: wrap;
}

#credentialsView .credentials-table .cred-cell-wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    word-break: break-word;
}

#credentialsView .view-header {
    align-items: flex-start;
}

.table-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
}

.data-table tbody tr {
    transition: background 0.2s;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.visitor-device-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

.visitor-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.visitor-device-icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

.visitor-device-icon--brand svg {
    width: 16px;
    height: 16px;
}

.visitor-device-icon--brand {
    color: var(--text-primary);
    opacity: 0.85;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Microsoft Token → Users: keep Permissions / Provider columns aligned */
.graph-users-sessions-table .graph-users-col-email { width: 22%; }
.graph-users-sessions-table .graph-users-col-status { width: 9%; }
.graph-users-sessions-table .graph-users-col-permissions { width: 20%; min-width: 140px; }
.graph-users-sessions-table .graph-users-col-provider { width: 12%; min-width: 88px; }
.graph-users-sessions-table .graph-users-col-note { width: 14%; }
.graph-users-sessions-table .graph-users-col-actions { width: 30%; min-width: 420px; }
.graph-users-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}
.graph-users-sessions-table td.graph-permissions-cell {
    vertical-align: middle;
    min-width: 140px;
    overflow: visible;
}
.graph-users-sessions-table .graph-perm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    max-width: 100%;
}
.graph-users-sessions-table .graph-resource-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.graph-users-sessions-table .graph-res-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    cursor: default;
}
.graph-users-sessions-table .graph-res-icon svg {
    width: 15px;
    height: 15px;
}
.graph-users-sessions-table .graph-res-icon--on {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.12);
}
.graph-users-sessions-table .graph-res-icon--off {
    color: var(--text-secondary, #888);
    opacity: 0.38;
    filter: grayscale(1);
}
.graph-users-sessions-table .graph-res-icon--unknown {
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.35);
    background: rgba(234, 179, 8, 0.08);
    opacity: 0.85;
}
.graph-users-sessions-table .graph-res-exp {
    font-size: 10px;
    color: var(--warning, #f59e0b);
    margin-left: 2px;
}
.graph-users-sessions-table .graph-generate-cookie-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.graph-users-sessions-table .graph-generate-cookie-btn.is-disabled,
.graph-users-sessions-table .graph-generate-cookie-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.35);
    box-shadow: none;
}
.graph-users-sessions-table .graph-generate-cookie-btn.btn-secondary.is-disabled,
.graph-users-sessions-table .graph-generate-cookie-btn.btn-secondary:disabled {
    background: var(--bg-tertiary, #2a2d35);
    border-color: var(--border-color, #3d424d);
    color: var(--text-muted, #9ca3af);
}
.graph-users-sessions-table .graph-cookie-btn-icon {
    display: inline-flex;
    line-height: 0;
}
.graph-users-sessions-table .graph-cookie-btn-icon svg {
    width: 14px;
    height: 14px;
}
.graph-users-sessions-table .graph-perm-summary {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-word;
}
.graph-users-sessions-table .graph-perm-summary--upgrading {
    color: #b45309;
    font-weight: 600;
    animation: graphPermUpgradePulse 1.2s ease-in-out infinite;
}
@keyframes graphPermUpgradePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.graph-users-sessions-table td.graph-provider-cell {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.graph-users-sessions-table td.graph-session-actions-cell {
    vertical-align: top;
    white-space: normal;
    overflow: visible;
    min-width: 0;
    max-width: 300px;
}
.graph-users-sessions-table .graph-session-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    gap: 6px;
    max-width: 100%;
    align-items: stretch;
}
.graph-users-sessions-table td.graph-session-actions-cell .btn {
    margin: 0;
    width: 100%;
    min-height: 36px;
    padding: 5px 4px;
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.graph-users-sessions-table td.graph-session-actions-cell .graph-generate-cookie-btn,
.graph-users-sessions-table td.graph-session-actions-cell .graph-token-cookie-script-btn {
    font-weight: 600;
}
.graph-users-sessions-table td.graph-session-actions-cell .graph-generate-cookie-btn .graph-cookie-btn-label {
    display: none;
}
.graph-users-sessions-table td.graph-session-actions-cell .graph-generate-cookie-btn .graph-cookie-btn-icon {
    margin: 0;
}
.graph-users-sessions-table td.graph-session-actions-cell .graph-open-mail-wrap {
    display: contents;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 14px;
}

.pagination-buttons {
    display: flex;
    gap: 12px;
}

.pagination-buttons .btn {
    min-width: 100px;
    justify-content: center;
}

.pagination-buttons .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-buttons .btn:disabled:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.tab-btn.active {
    background: var(--bg-secondary);
    color: var(--accent);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Graph / sub-tabs: same strip style as .tabs so tab bar sits above content correctly */
.subtabs {
    display: flex;
    gap: 8px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* Alias for legacy .subtab buttons (same look as .tab-btn) */
.subtabs .subtab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.subtabs .subtab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.subtabs .subtab.active {
    background: var(--bg-secondary);
    color: var(--accent);
}

.subtabs + .settings-form,
.subtabs + .section {
    margin-top: 0;
}

.tab-btn.small {
    padding: 6px 14px;
    font-size: 13px;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-success:hover {
    background: #16a34a;
}

.dash3d-rmm-cred-list {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 8px 12px;
    font-size: 13px;
}
.dash3d-rmm-cred-list dt {
    margin: 0;
    color: var(--text-muted, #9ca3af);
    font-weight: 600;
}
.dash3d-rmm-cred-list dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Deployment tab: round compact action buttons, max 2 rows, tooltip on hover */
.deployment-server-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 72px;
    align-content: flex-start;
    overflow: hidden;
}

.deployment-server-actions .btn-action-round {
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11px;
    min-height: 26px;
    white-space: nowrap;
}

.deployment-server-actions .btn-action-round[title] {
    cursor: pointer;
}

/* Forms */
.settings-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 32px;
}

/* Settings: General | Custom Services */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    margin: -4px 0 28px;
    padding: 0;
}

.settings-tab-btn {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    margin-bottom: -1px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.settings-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.settings-tab-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.settings-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
}

/* Settings view: icons on tab labels and section headings */
#settingsView .settings-tab-btn-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#settingsView .settings-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.82;
    color: inherit;
}
#settingsView .settings-tab-btn.active .settings-tab-icon {
    opacity: 1;
}
#settingsView .settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    line-height: 1.35;
}
#settingsView .settings-section-title .settings-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.14);
    color: var(--accent, #3b82f6);
}
#settingsView .settings-section-title .settings-section-icon svg {
    display: block;
}
#settingsView .settings-section-title .settings-section-title-text {
    flex: 1;
    min-width: 0;
}
#settingsView .label-with-help.settings-section-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
#settingsView .label-with-help.settings-section-head-row .settings-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.14);
    color: var(--accent, #3b82f6);
    flex-shrink: 0;
}
#settingsView .label-with-help.settings-section-head-row .settings-section-icon svg {
    display: block;
}

.settings-tab-panels {
    min-height: 80px;
}

.settings-tab-panel[hidden] {
    display: none !important;
}

code,
.form-help code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
}

.form-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Payload landing link: copiable card (no template name in URL) */
.payload-landing-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-width: 100%;
}
.payload-landing-card .payload-landing-url {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payload-landing-card .btn-copy-landing {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
}

.form-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.4;
}

.graph-mx-info-icon {
    font-size: 14px;
    opacity: 0.7;
    cursor: help;
    color: var(--text-secondary, #666);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-grid .form-group {
    margin-bottom: 0;
}

.form-grid .form-actions {
    margin: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-checkbox input {
    width: 16px;
    height: 16px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-help {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Settings → General: compact rows + modals for redirect / CAPTCHA / backgrounds */
.settings-config-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.settings-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #2d3640);
    border-radius: 8px;
    background: var(--bg-secondary, #1a1f26);
}
.settings-config-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.settings-config-row-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(15, 108, 189, 0.14);
    color: var(--accent, #0f6cbd);
}
.settings-config-row-icon svg {
    width: 20px;
    height: 20px;
}
.settings-config-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.settings-config-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e5e7eb);
}
.settings-config-row-desc {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
    line-height: 1.35;
}
.modal-content.modal-settings-nested {
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-settings-cards {
    flex: 1;
    overflow-y: auto;
    padding-top: 4px;
}
.modal-captcha-bg-drop {
    border: 2px dashed var(--border-color, #2d3640);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-secondary, #1a1f26);
    min-height: 56px;
    font-size: 13px;
}
.modal-settings-cards .captcha-designs-grid,
.modal-settings-cards .redirect-templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.modal-settings-cards .captcha-design-card,
.modal-settings-cards .redirect-template-card {
    padding: 8px 10px;
}
.modal-settings-cards .captcha-design-preview,
.modal-settings-cards .redirect-template-preview {
    height: 96px !important;
    margin-bottom: 8px;
}
.modal-settings-cards .captcha-design-name,
.modal-settings-cards .redirect-template-name {
    font-size: 12px;
    margin-bottom: 2px;
}
.modal-settings-cards .captcha-design-type,
.modal-settings-cards .redirect-template-type {
    font-size: 10px;
}

/* CAPTCHA Design Grid */
.captcha-design-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 4px;
}
.captcha-design-header-copy label {
    display: block;
    margin-bottom: 4px;
}
.captcha-design-header-copy .form-help {
    display: block;
    margin: 0;
}
.captcha-color-palette-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}
.captcha-color-palette-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e8eaed);
    background: var(--bg-secondary, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.captcha-color-palette-toggle:hover {
    border-color: var(--accent, #3b82f6);
    background: var(--bg-hover, #161616);
}
.captcha-color-palette-toggle[aria-expanded="true"] {
    border-color: var(--accent, #3b82f6);
}
.captcha-color-palette-toggle-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: var(--captcha-toggle-color, #0078d4);
    flex-shrink: 0;
}
.captcha-color-palette-toggle-chevron {
    opacity: 0.55;
    transition: transform 0.15s ease;
}
.captcha-color-palette-toggle[aria-expanded="true"] .captcha-color-palette-toggle-chevron {
    transform: rotate(180deg);
}
.captcha-color-palette-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: min(280px, calc(100vw - 48px));
    padding: 12px;
    background: var(--bg-secondary, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.captcha-color-palette-panel[hidden] {
    display: none !important;
}
.captcha-color-palette-hint {
    display: block;
    margin: 0 0 10px;
    text-align: left;
    line-height: 1.4;
}
.captcha-color-pickers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.captcha-color-picker-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.captcha-color-picker-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.captcha-color-picker-hex {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted, rgba(232, 234, 237, 0.38));
    text-transform: none;
    letter-spacing: 0;
}
.captcha-color-picker-sl {
    position: relative;
    width: 100%;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
    cursor: crosshair;
    border: 1px solid var(--border-color, #333);
    touch-action: none;
}
.captcha-color-picker-sl canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.captcha-color-picker-cursor {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.captcha-color-picker-hue {
    position: relative;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-color, #333);
    touch-action: none;
}
.captcha-color-picker-hue canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.captcha-color-picker-hue-thumb {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 16px;
    margin: -8px 0 0 -4px;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.captcha-color-palette-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #333);
}
.captcha-color-palette-revert {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    background: transparent;
    border: 1px solid var(--border-color, #333);
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.captcha-color-palette-revert:hover {
    color: var(--text-primary, #e8eaed);
    border-color: var(--accent, #3b82f6);
    background: var(--bg-hover, #161616);
}
.captcha-designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.captcha-design-card {
    position: relative;
    background: var(--bg-secondary, #1e1e1e);
    border: 2px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.captcha-design-card:hover {
    border-color: var(--accent, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.captcha-design-card.selected {
    border-color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.default-captcha-auth-modal-group.default-captcha-auth-modal-group--disabled {
    opacity: 0.55;
}

.default-captcha-auth-modal-group.default-captcha-auth-modal-group--disabled label {
    cursor: not-allowed;
}

.default-captcha-auth-modal-group.default-captcha-auth-modal-group--disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.captcha-design-card.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--accent, #3b82f6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.captcha-design-preview-wrap {
    margin-bottom: 10px;
}
.captcha-design-preview-wrap--live .captcha-design-preview.captcha-design-preview-live {
    height: auto;
    min-height: 200px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

.captcha-design-preview {
    width: 100%;
    min-height: 120px;
    height: 120px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.captcha-design-preview.turnstile {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.captcha-design-preview.hcaptcha {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.captcha-design-preview.recaptcha {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.captcha-design-preview.security-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.captcha-design-preview.session-verify {
    background: #ffffff;
}

.captcha-design-preview.human-verification,
.captcha-design-preview.lumen-glass,
.captcha-design-preview.prism-verify {
    background: #ffffff;
}

.captcha-preview-box {
    width: 140px;
    height: 50px;
    border: 2.5px solid;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.captcha-preview-checkbox {
    width: 18px;
    height: 18px;
    border: 2.5px solid;
    border-radius: 6px;
    margin-right: 10px;
    flex-shrink: 0;
    background: white;
}

.captcha-preview-text {
    font-size: 12px;
    font-weight: 600;
    color: #202124;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.captcha-design-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 2px;
}

.captcha-design-type {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
}

/* Redirect Templates — categorized collapsible sections */
.redirect-templates-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.redirect-templates-category {
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary, #1e1e1e);
}

.redirect-templates-category-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
    color: var(--text-primary, #e5e7eb);
    font: 600 13px/1.3 inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.redirect-templates-category-header:hover {
    background: rgba(59, 130, 246, 0.08);
}

.redirect-templates-category-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted, #9ca3af);
    border-bottom: 2px solid var(--text-muted, #9ca3af);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -2px;
}

.redirect-templates-category.is-open .redirect-templates-category-chevron {
    transform: rotate(45deg);
    margin-top: 2px;
}

.redirect-templates-category-label {
    flex: 1;
}

.redirect-templates-category-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
}

.redirect-templates-category-body {
    display: none;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border-color, #333);
}

.redirect-templates-category.is-open .redirect-templates-category-body {
    display: grid;
}

/* AntiRed landing gallery — same collapsible sections as redirect templates */
.anti-red-landing-categories {
    margin-top: 10px;
}

.anti-red-landing-categories .redirect-templates-category-body.preloader-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

/* Redirect Templates Grid */
.redirect-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 0;
}

.redirect-templates-section-title {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 12px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #333);
}

.redirect-templates-grid .redirect-templates-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.redirect-template-card {
    position: relative;
    background: var(--bg-secondary, #1e1e1e);
    border: 2px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.redirect-template-card:hover {
    border-color: var(--accent, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.redirect-template-card.selected {
    border-color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.redirect-template-card.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--accent, #3b82f6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.redirect-template-preview {
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.redirect-template-preview.default {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.redirect-template-preview.adobe {
    background: linear-gradient(180deg, #ff0000 0%, #cc0000 100%);
}

.redirect-template-preview.microsoft {
    background: linear-gradient(180deg, #0078d4 0%, #005a9e 100%);
}

.redirect-template-preview.google {
    background: linear-gradient(180deg, #4285f4 0%, #1a73e8 100%);
}

.redirect-template-preview.dropbox {
    background: linear-gradient(180deg, #0061ff 0%, #0052cc 100%);
}

.redirect-template-preview.onedrive {
    background: linear-gradient(180deg, #0078d4 0%, #106ebe 100%);
}

.redirect-template-preview.document {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.redirect-template-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 4px;
}

.redirect-template-type {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
}

.form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.redirect-gen-saved-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.redirect-gen-saved-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.redirect-gen-saved-item:last-child {
    border-bottom: none;
}
.redirect-gen-saved-meta {
    font-size: 12px;
    color: var(--accent);
    font-weight: 500;
}
.redirect-gen-saved-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.redirect-gen-saved-item .redirect-gen-saved-url {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.redirect-gen-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.form-message {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
}

.form-message.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    display: block;
}

.form-message.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    display: block;
}

/* Timeout Warning Modal */
.timeout-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.timeout-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.timeout-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.timeout-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeout-modal-body {
    padding: 24px;
    text-align: center;
}

.timeout-modal-body p {
    color: var(--text-secondary);
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
}

.timeout-countdown-display {
    font-size: 48px;
    font-weight: 700;
    color: var(--danger);
    margin: 16px 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 4px;
}

.timeout-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
}

.timeout-modal-footer .btn {
    padding: 10px 20px;
    font-size: 14px;
}

/* Modal - centered on screen (welcome, 2FA, etc.) */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Above sidebar backdrop (1000) and deployed welcome tour (10050) */
    z-index: 10200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Live sneaky activity log must sit above Add domain (generic modal ≈ 100700).
   Only while .active — never force display via a leftover top-stack class. */
#sneakyProxyActivityModal.modal.active {
    z-index: 100720 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal.modal--glass {
    background: rgba(15, 10, 12, 0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal.active,
.modal[style*="display: flex"],
#welcomeModal[style*="display: flex"],
#twoFAModal[style*="display: flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Credential details must sit above Quick URL drawer (~20000) */
#credentialModal.modal.active,
#credentialModal.modal.dashboard-modal-layer.active {
    z-index: 100700 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Settings + deployment overlay modals — portal to body + forced visibility */
.modal.settings-modal-layer.active,
.modal.dashboard-modal-layer.active,
[id^="modalSettings"].modal.active,
#editServerModal.modal.active,
#deploymentServerActionsModal.modal.active,
#deploymentAssignUserModal.modal.active,
#dash3dRmm_assignModal.modal.active,
#dash3dRmm_overlay_server.modal.active,
#dash3dCrmSender_activityLogModal.modal.active,
#dash3dCrmSender_deploySuccessModal.modal.active,
#dash3dCrmSender_overlay_server.modal.active,
#dash3dCrmSender_assignModal.modal.active,
#dash3dLeads_activityLogModal.modal.active,
#dash3dLeads_deploySuccessModal.modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 12000 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal.settings-modal-layer .modal-content,
.modal.dashboard-modal-layer .modal-content,
[id^="modalSettings"].modal.active .modal-content,
#editServerModal.modal.active .modal-content,
#deploymentServerActionsModal.modal.active .modal-content,
#deploymentAssignUserModal.modal.active .modal-content,
#dash3dRmm_assignModal.modal.active .modal-content,
#dash3dRmm_overlay_server.modal.active .modal-content {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

body.settings-modal-open {
    overflow: hidden !important;
}

body.settings-modal-open .content-area {
    overflow: hidden !important;
}

#graphUserProfileModal.modal-backdrop,
#graphCookieScriptModal.modal-backdrop,
#graphTokenViewModal.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
#graphUserProfileModal.modal-backdrop[style*="flex"],
#graphCookieScriptModal.modal-backdrop[style*="flex"],
#graphTokenViewModal.modal-backdrop[style*="flex"] {
    display: flex !important;
}
#graphUserProfileModal .modal-content,
#graphCookieScriptModal .modal-content,
#graphTokenViewModal .modal-content {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

/* Graph template preview modal: centered, iframe fits like a browser */
.graph-template-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.graph-template-modal-backdrop.dlm-open {
    display: flex !important;
}
.graph-template-modal-backdrop[style*="flex"] {
    display: flex !important;
}
.graph-template-modal-dialog {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    max-width: 920px;
    width: 100%;
    height: min(85vh, 720px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.graph-template-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.graph-template-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
}
.graph-template-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
}
.graph-template-modal-close:hover {
    color: var(--text-primary, #f1f5f9);
    background: rgba(255,255,255,0.08);
}
.graph-template-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#graphTemplateModalFrame {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    display: block;
    background: #fff;
}

/* Deployment Activity modal: must always show when active, never hidden by parent overflow/stacking */
#deploymentActivityModal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Deployment Manage modal: same stacking/visibility guarantees as Activity */
#serverManagementModal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Welcome modal: always centered on screen, HD */
.welcome-modal,
#welcomeModal {
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.welcome-modal.show,
#welcomeModal[style*="flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.welcome-modal-content {
    max-width: 720px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    margin: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.5;
}
.welcome-modal-body {
    overflow-y: auto;
    padding: 24px;
}
.welcome-hero {
    text-align: center;
    margin-bottom: 24px;
}
.welcome-hero-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--accent), var(--purple, #8b5cf6));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}
.welcome-steps .welcome-step {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}
.welcome-steps .welcome-step:last-child {
    border-bottom: none;
}
.welcome-steps .welcome-step h4 {
    color: var(--accent);
    margin-bottom: 12px;
    font-size: 18px;
}
.welcome-steps .welcome-step ul {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
}
.welcome-2fa-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.welcome-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}
.welcome-footer-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ——— Deployed welcome tour (spotlight + carousel) ——— */
.deployed-welcome-tour {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

/* Dark but transparent: UI stays readable behind the tour (outside the spotlight hole). */
.deployed-tour-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(2px) saturate(1.05);
    -webkit-backdrop-filter: blur(2px) saturate(1.05);
    pointer-events: auto;
    transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1), -webkit-clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

:root.light-theme .deployed-tour-dim {
    background: rgba(0, 0, 0, 0.3);
}

.deployed-tour-ring {
    position: fixed;
    z-index: 10051;
    pointer-events: none;
    box-sizing: border-box;
    border: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
        0 0 28px color-mix(in srgb, var(--accent) 28%, transparent),
        inset 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
    transition:
        top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.35s ease,
        opacity 0.35s ease;
    animation: deployedTourRingPulse 2.4s ease-in-out infinite;
}

@keyframes deployedTourRingPulse {
    0%,
    100% {
        border-color: color-mix(in srgb, var(--accent) 52%, transparent);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
            0 0 22px color-mix(in srgb, var(--accent) 22%, transparent),
            inset 0 0 14px color-mix(in srgb, var(--accent) 10%, transparent);
    }
    50% {
        border-color: color-mix(in srgb, var(--accent) 88%, #fff 12%);
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent),
            0 0 38px color-mix(in srgb, var(--accent) 38%, transparent),
            inset 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent);
    }
}

.deployed-tour-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 0 solid rgba(255, 255, 255, 0.9);
    pointer-events: none;
    opacity: 0.95;
}
.deployed-tour-c1 {
    top: -1px;
    left: -1px;
    border-top-width: 3px;
    border-left-width: 3px;
    border-top-left-radius: 4px;
}
.deployed-tour-c2 {
    top: -1px;
    right: -1px;
    border-top-width: 3px;
    border-right-width: 3px;
    border-top-right-radius: 4px;
}
.deployed-tour-c3 {
    bottom: -1px;
    right: -1px;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-bottom-right-radius: 4px;
}
.deployed-tour-c4 {
    bottom: -1px;
    left: -1px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-bottom-left-radius: 4px;
}

.deployed-tour-card {
    position: fixed;
    z-index: 10053;
    pointer-events: auto;
    max-width: min(520px, calc(100vw - 28px));
    padding: 22px 22px 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--bg-primary) 4%);
    border: 1px solid var(--border-color);
    box-shadow:
        0 24px 64px color-mix(in srgb, #000 55%, transparent),
        0 0 0 1px color-mix(in srgb, var(--text-primary) 6%, transparent) inset;
    color: var(--text-primary);
    overflow: hidden;
}

.deployed-tour-card--centered {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.deployed-tour-card-shine {
    position: absolute;
    top: -40%;
    left: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.deployed-tour-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    position: relative;
}

.deployed-tour-kicker {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    position: relative;
}

.deployed-tour-title {
    margin: 0 0 12px 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    position: relative;
    background: linear-gradient(90deg, var(--text-primary) 0%, color-mix(in srgb, var(--accent) 75%, var(--text-primary) 25%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.deployed-tour-body {
    position: relative;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-height: min(52vh, 440px);
    overflow-y: auto;
    padding-right: 6px;
}

.deployed-tour-body p {
    margin: 0 0 10px 0;
}

.deployed-tour-body p:last-child {
    margin-bottom: 0;
}

.deployed-tour-list {
    margin: 8px 0 12px 0;
    padding-left: 18px;
    color: var(--text-secondary, #cbd5e1);
}

.deployed-tour-list li {
    margin-bottom: 6px;
}

.deployed-tour-muted {
    font-size: 13px;
    color: var(--text-muted, #94a3b8) !important;
}

.deployed-tour-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 14px;
    position: relative;
}

.deployed-tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    transition: transform 0.25s ease, background 0.25s ease;
}

.deployed-tour-dot.is-active {
    background: var(--accent);
    transform: scale(1.25);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

.deployed-tour-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.deployed-tour-actions-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.deployed-tour-actions .btn-sm {
    align-self: flex-start;
}

.deployed-tour-skip-all {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.deployed-tour-skip-all:hover {
    color: var(--text-primary, #e2e8f0);
}

body.deployed-tour-open {
    /* Reduce accidental layout shift; tour handles scroll updates */
}

.light-theme .deployed-tour-title {
    background: linear-gradient(90deg, var(--text-primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.light-theme .deployed-tour-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.light-theme .deployed-tour-body,
.light-theme .deployed-tour-list {
    color: var(--text-secondary);
}

/* Walkthrough video modal (above tour z-index 10050) */
.deployed-tour-video-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-primary) 88%, #000 12%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 16px;
    pointer-events: auto;
}

.deployed-tour-video-dialog {
    width: min(960px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 50px color-mix(in srgb, #000 45%, transparent);
}

.deployed-tour-video-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.deployed-tour-video-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.deployed-tour-video-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.deployed-tour-video-close:hover {
    color: var(--text-primary, #f1f5f9);
    background: rgba(255, 255, 255, 0.06);
}

.deployed-tour-video-wrap {
    padding: 12px 16px 0;
}

.deployed-tour-video-el {
    width: 100%;
    max-height: min(70vh, 540px);
    border-radius: 8px;
    background: #000;
}

.deployed-tour-video-hint {
    padding: 10px 16px 16px;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

/* Custom Modal System — above AntiRed/dlm overlays (flow detail 11004, download pick 12000) */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-dashboard-alert);
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.custom-modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 10002;
    animation: modalSlideIn 0.2s ease-out;
}

.custom-modal-content--wide {
    max-width: min(720px, 96vw);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.custom-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.custom-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.custom-modal-body {
    padding: 24px;
}

.custom-modal-body p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.custom-modal-body .custom-modal-message {
    color: var(--text-secondary);
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Campaign Protector stats (modal.show wide) */
.cp-stats-modal {
    font-size: 13px;
    color: var(--text-secondary);
    max-height: min(70vh, 580px);
    overflow-y: auto;
    padding-right: 6px;
}

.cp-stats-h4 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    opacity: 0.9;
}

.cp-stats-dl {
    display: grid;
    grid-template-columns: minmax(100px, 130px) 1fr;
    gap: 6px 14px;
    margin: 0 0 16px;
    align-items: start;
}

.cp-stats-dl dt {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    opacity: 0.85;
}

.cp-stats-dl dd {
    margin: 0;
    word-break: break-word;
    font-size: 13px;
    color: var(--text-primary);
}

.cp-stats-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.cp-stats-kpi .kpi {
    background: var(--bg-primary, rgba(0, 0, 0, 0.15));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
}

.cp-stats-kpi .kpi-val {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.cp-stats-kpi .kpi-lab {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 6px;
    opacity: 0.8;
}

.cp-stats-tags {
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--bg-primary, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.cp-stats-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 8px;
}

.cp-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cp-stats-table th,
.cp-stats-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.cp-stats-table th {
    background: var(--bg-primary, rgba(0, 0, 0, 0.2));
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.cp-stats-table tr:last-child td {
    border-bottom: none;
}

.cp-stats-table td.mono {
    font-family: ui-monospace, monospace;
    font-size: 11px;
}

.custom-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
}

.custom-modal-footer .btn {
    padding: 10px 20px;
    font-size: 14px;
    min-width: 80px;
}

/* Custom Notifications */
.custom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10003;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.custom-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.custom-notification-success {
    border-left: 4px solid var(--success);
}

.custom-notification-error {
    border-left: 4px solid var(--danger);
}

.custom-notification-info {
    border-left: 4px solid var(--accent);
}

.custom-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom-notification-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.custom-notification-success .custom-notification-icon {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.custom-notification-error .custom-notification-icon {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.custom-notification-info .custom-notification-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent);
}

.custom-notification-message {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

/* Leaflet Map Customization - Match Dashboard Theme */
#worldMapContainer {
    width: 100%;
    height: 100%;
    min-height: 250px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#worldMapContainer .leaflet-container {
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    width: 100% !important;
    height: 100% !important;
}

/* Dark-style tiles for red / dark / grain-black themes; outlook stays bright */
#worldMapContainer .leaflet-tile-container img {
    filter: var(--map-tile-filter, invert(1) hue-rotate(180deg) brightness(0.76) contrast(0.9) saturate(0.55));
    transition: filter 0.35s ease;
}

#worldMapContainer .dashboard-map-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 400;
    border-radius: 8px;
    background: var(--map-vignette, transparent);
    mix-blend-mode: var(--map-blend, multiply);
}

html.outlook-theme #worldMapContainer .dashboard-map-vignette {
    mix-blend-mode: normal;
    opacity: 0.85;
}

html.outlook-theme #worldMapContainer .leaflet-tile-container img {
    filter: none;
}

html.outlook-theme {
    --map-tile-filter: none;
    --map-vignette: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 52%, rgba(15, 23, 42, 0.06) 100%);
    --map-attribution-bg: rgba(255, 255, 255, 0.94);
    --map-blend: normal;
}

/* Zoom controls - match dashboard buttons */
#worldMapContainer .leaflet-control-zoom {
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#worldMapContainer .leaflet-control-zoom a {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

#worldMapContainer .leaflet-control-zoom a:hover {
    background: var(--bg-hover) !important;
    color: var(--accent) !important;
}

#worldMapContainer .leaflet-control-zoom-in {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

#worldMapContainer .leaflet-control-zoom-out {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom: none !important;
}

/* Attribution - match dashboard theme */
#worldMapContainer .leaflet-control-attribution {
    background: var(--map-attribution-bg, rgba(20, 20, 20, 0.92)) !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(6px);
}

#worldMapContainer .leaflet-control-attribution a {
    color: var(--accent) !important;
}

/* Custom markers */
#worldMapContainer .custom-marker {
    background: transparent;
    border: none;
}

/* Popups - match dashboard cards */
#worldMapContainer .leaflet-popup-content-wrapper {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
}

#worldMapContainer .leaflet-popup-tip {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

#worldMapContainer .leaflet-popup-content {
    color: var(--text-primary) !important;
    font-size: 13px !important;
    margin: 12px 16px !important;
    font-weight: 500 !important;
}

#worldMapContainer .leaflet-popup-close-button {
    color: var(--text-muted) !important;
    font-size: 20px !important;
    padding: 8px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 20px !important;
}

#worldMapContainer .leaflet-popup-close-button:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

#worldMapContainer .leaflet-map-pane,
#worldMapContainer .leaflet-tile-pane,
#worldMapContainer .leaflet-overlay-pane {
    width: 100% !important;
    height: 100% !important;
}

#worldMapContainer .leaflet-pane {
    width: 100% !important;
    height: 100% !important;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Global confirms, alerts, and toasts — above Quick URL drawer and portaled pick menus */
.dashboard-overlay-top {
    z-index: var(--z-dashboard-alert) !important;
}
.dashboard-overlay-top.dashboard-overlay-progress {
    z-index: var(--z-dashboard-alert-progress) !important;
}
.dashboard-floating-toast {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: max(20px, env(safe-area-inset-right, 0px));
    z-index: var(--z-dashboard-toast);
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    animation: dashboard-floating-toast-in 0.28s ease-out;
}
@keyframes dashboard-floating-toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.dashboard-floating-toast--error {
    background: rgba(220, 38, 38, 0.95);
    color: #fff;
}
.dashboard-floating-toast--success {
    background: rgba(16, 185, 129, 0.95);
    color: #fff;
}
.dashboard-floating-toast--warning {
    background: rgba(245, 158, 11, 0.95);
    color: #111;
}
.dashboard-floating-toast--info {
    background: var(--bg-secondary, #222);
    color: var(--text-primary, #eee);
    border: 1px solid var(--border-color, #444);
}

/* Quick URL — corner rail + centered modal */
body.quick-url-modal-open {
    overflow: hidden;
}

.quick-url-drawer-host {
    position: fixed;
    inset: 0;
    z-index: var(--z-quick-url-drawer);
    pointer-events: none;
    visibility: visible;
}

.quick-url-drawer-host.is-drawer-open .quick-url-trigger-rail {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.quick-url-trigger-rail {
    position: fixed;
    right: 0;
    bottom: 140px;
    top: auto;
    z-index: 20002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 6px 0 6px 6px;
    pointer-events: auto;
    touch-action: none;
    border-radius: 12px 0 0 12px;
    transition: box-shadow 0.2s ease;
    cursor: grab;
    user-select: none;
    visibility: visible;
    opacity: 1;
    box-shadow: -4px 0 28px rgba(0, 0, 0, 0.35);
}

.quick-url-trigger-rail.is-dragging {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
    cursor: grabbing;
}

.quick-url-trigger-rail.is-dragging .quick-url-trigger-btn {
    cursor: grabbing;
}

@keyframes quick-url-trigger-breathe {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    }
    50% {
        transform: scale(1.045);
        box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 32%, rgba(0, 0, 0, 0.28));
    }
}

.quick-url-trigger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 66px;
    min-height: 66px;
    padding: 9px 6px;
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--border-color);
    border-right: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.22);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.quick-url-trigger-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--text-primary);
    animation: quick-url-trigger-breathe 1.85s ease-in-out infinite;
}

.quick-url-trigger-btn.is-drawer-open {
    animation: none;
    transform: none;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
    color: var(--accent);
    box-shadow: -2px 2px 16px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.28));
}

@media (prefers-reduced-motion: reduce) {
    .quick-url-trigger-btn:hover:not(:disabled) {
        animation: none;
    }
}

.quick-url-trigger-icon {
    flex-shrink: 0;
    display: block;
}

.quick-url-trigger-icon--ms {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.quick-url-trigger-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
}

.quick-url-trigger-btn--proxy.quick-url-trigger-btn--engine-default {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
    color: var(--accent);
}

.quick-url-trigger-btn--proxy.quick-url-trigger-btn--engine-scramjet {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border-color));
    color: var(--warning);
}

.quick-url-trigger-btn--proxy.quick-url-trigger-btn--engine-puppeteer {
    border-color: color-mix(in srgb, var(--purple) 40%, var(--border-color));
    color: var(--purple);
}

.quick-url-trigger-btn--proxy.is-drawer-open.quick-url-trigger-btn--engine-default {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
}

.quick-url-trigger-btn--proxy.is-drawer-open.quick-url-trigger-btn--engine-scramjet {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, var(--bg-secondary));
}

.quick-url-trigger-btn--proxy.is-drawer-open.quick-url-trigger-btn--engine-puppeteer {
    color: var(--purple);
    background: color-mix(in srgb, var(--purple) 12%, var(--bg-secondary));
}

.quick-url-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19998;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.quick-url-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.quick-url-drawer.quick-url-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 19999;
    width: min(560px, calc(100vw - 28px));
    max-width: 100%;
    max-height: min(88vh, 920px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.97);
    transition:
        opacity 0.22s ease,
        transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}

.quick-url-drawer.quick-url-modal.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .quick-url-drawer.quick-url-modal,
    .quick-url-drawer-backdrop {
        transition: none;
    }
    .quick-url-drawer.quick-url-modal {
        transform: translate(-50%, -50%);
    }
}

.quick-url-drawer-head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.12));
}

.quick-url-drawer-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.quick-url-drawer-sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.quick-url-drawer-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.quick-url-drawer-close:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-primary);
}

.quick-url-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px 18px;
    -webkit-overflow-scrolling: touch;
}

.quick-url-drawer-panel[hidden] {
    display: none !important;
}

.proxy-engine-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-color) 65%, transparent);
}
.proxy-engine-dot--default {
    background: var(--accent);
}
.proxy-engine-dot--scramjet {
    background: var(--warning);
}
.proxy-engine-dot--puppeteer {
    background: var(--purple);
}

@media (max-width: 520px) {
    .quick-url-trigger-rail {
        right: 0;
        gap: 6px;
        padding-left: 4px;
    }

    .quick-url-trigger-btn {
        width: 60px;
        min-height: 60px;
    }

    .quick-url-drawer.quick-url-modal {
        width: calc(100vw - 16px);
        max-height: 92vh;
    }
}

/* Ongoing deployments list (bottom-right, persistent) */
.deployment-ongoing-list {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    max-height: 320px;
    overflow-y: auto;
}
.deployment-compact-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    font-size: 13px;
    max-width: 380px;
}
.deployment-compact-bar .deployment-compact-name {
    color: var(--text-secondary);
    font-size: 12px;
    flex-shrink: 0;
}
.deployment-compact-actions { display: flex; gap: 6px; flex-shrink: 0; }
.deployment-compact-bar.complete .deployment-compact-name { color: var(--success); }
.deployment-compact-bar.error .deployment-compact-name { color: var(--danger); }

.modal-body {
    padding: 24px;
    overflow-y: auto;
    color: var(--text-primary);
}

/* Responsive Design - Overhauled for full mobile support */
@media (max-width: 1480px) {
    .app-header-top {
        flex-wrap: nowrap;
        padding-right: 8px;
    }

    html.deployed-server .app-header-top #headerDeployedTunnelBtnLabel,
    html.deployed-server .app-header-top #headerPanelRestartBtnLabel {
        display: none;
    }

    .app-header-brand {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(176px, 30vw);
        padding: 0 10px;
        border-right: none;
    }

    .app-header-ticker {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 0 8px;
        gap: 6px;
        border-top: none;
        border-right: 1px solid var(--header-top-edge);
    }

    .app-header-ticker-label {
        font-size: 0.55rem;
        padding: 2px 5px;
        letter-spacing: 0.08em;
    }

    .app-header-ticker-text {
        font-size: clamp(0.68rem, 1.6vw, 0.8rem);
    }

    .app-header-top .header-right {
        flex: 0 0 auto;
        margin-left: 0;
        padding-left: 6px;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .app-header-toolbar {
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 6px 12px !important;
        gap: 6px !important;
    }

    .app-header-toolbar .header-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        gap: 0;
        justify-content: center;
        flex: 0 0 auto;
    }

    .app-header-toolbar .header-btn span {
        display: none;
    }

    .app-header-toolbar .header-btn svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 1024px) {
    .charts-row {
        grid-template-columns: 1fr 1fr;
    }

    .app-header-top {
        flex-wrap: nowrap;
        padding-right: 8px;
    }

    .app-header-brand {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(160px, 28vw);
        border-right: none;
        padding: 0 8px;
    }

    .app-header-ticker {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 0 6px;
        gap: 5px;
        border-top: none;
        border-right: 1px solid var(--header-top-edge);
    }

    .app-header-ticker-label {
        font-size: clamp(0.5rem, 1.5vw, 0.58rem);
        max-width: 3.5rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px 4px;
    }

    .app-header-ticker-text {
        font-size: clamp(0.66rem, 1.5vw, 0.78rem);
    }

    .app-header-top .header-right {
        flex: 0 0 auto;
        margin-left: 0;
        padding-left: 4px;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .app-header-toolbar {
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 6px 10px !important;
    }

    /* Shrink viewport: compact round icon toggles */
    .app-header-toolbar .header-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        gap: 0;
        justify-content: center;
    }

    .app-header-toolbar .header-btn span {
        display: none;
    }

    .app-header-toolbar .header-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 768px) {

    /* Critical: Reset all horizontal overflow */
    html,
    body,
    .app-container {
        overflow-x: hidden !important;
        position: relative;
        width: 100% !important;
    }

    .app-header {
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        position: relative !important;
    }

    .app-header-top {
        width: 100% !important;
        padding: 6px 8px !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }

    .app-header-brand {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: min(140px, 34vw) !important;
        border-right: none !important;
        padding: 0 6px !important;
    }

    .app-header-toolbar {
        width: 100% !important;
        order: 3 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .app-header-top .header-right {
        width: auto !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        order: unset !important;
        padding-top: 0 !important;
        gap: 4px !important;
        margin-left: 0 !important;
    }

    .app-header-ticker {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        order: unset !important;
        padding: 0 4px !important;
        gap: 4px !important;
        border-right: 1px solid var(--header-top-edge) !important;
        border-top: none !important;
    }

    .app-header-ticker-label {
        font-size: 0.5rem !important;
        max-width: 2.75rem !important;
        padding: 2px 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .app-header-ticker-text {
        font-size: clamp(0.62rem, 2vw, 0.72rem) !important;
    }

    .logo {
        font-size: clamp(1.1rem, 4.2vw, 1.45rem) !important;
    }

    .brand-lockup--header {
        max-width: 100%;
    }

    /* Top-bar controls only */
    .app-header-top .header-btn,
    .app-header-top .engine-select-wrapper,
    .app-header-top .antibot-select-wrapper {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .app-header-top .header-btn {
        padding: 5px 8px !important;
        font-size: clamp(10px, 2.5vw, 12px) !important;
    }

    .app-header-top .header-btn span:not(.marketplace-notif-count) {
        font-size: clamp(9px, 2.2vw, 11px) !important;
    }

    .app-header-top .header-btn svg {
        width: clamp(12px, 3vw, 14px) !important;
        height: clamp(12px, 3vw, 14px) !important;
    }

    .app-header-top .antibot-select,
    .app-header-top .engine-select {
        font-size: clamp(10px, 2.4vw, 12px) !important;
        min-height: 30px !important;
        max-width: clamp(108px, 28vw, 148px) !important;
        padding: 4px 8px !important;
    }

    .app-header-toolbar .header-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
    }

    .app-header-toolbar .header-btn span {
        display: none !important;
    }

    .app-header-toolbar .header-btn svg {
        width: 13px !important;
        height: 13px !important;
    }

    .mobile-menu-btn {
        display: block !important;
        order: -1 !important;
        /* Move to start */
    }

    /* Sidebar Mobile State */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 2000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: var(--bg-secondary) !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5) !important;
        visibility: hidden !important;
        display: block !important;
    }

    .app-container.sidebar-open .sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 1999 !important;
        backdrop-filter: blur(4px) !important;
    }

    .app-container.sidebar-open .sidebar-backdrop {
        display: block !important;
    }

    .app-main {
        display: block !important;
        width: 100% !important;
    }

    .content-area {
        padding: 16px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Single Straight Responsive Page - Vertical Stacks */
    .stats-grid:not(.stats-grid-overview),
    .charts-row,
    .summary-grid,
    .card-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Keep overview metrics in one horizontal row (scroll if needed) */
    .stats-grid-overview {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(72px, 1fr)) !important;
        flex-direction: unset !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .stats-grid-overview .stat-card {
        width: auto !important;
        min-width: 0 !important;
        min-height: 72px !important;
        padding: 8px 6px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
    }

    .stats-grid-overview .stat-icon {
        display: none !important;
    }

    .stats-grid-overview .stat-label {
        white-space: normal !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        max-height: 2.4em;
        overflow: hidden;
    }

    .stats-grid-overview .stat-value {
        font-size: 1.15rem !important;
    }

    .stat-card,
    .chart-card,
    .summary-card {
        width: 100% !important;
    }

    .stats-grid-overview > .stat-card {
        width: auto !important;
    }

    .view-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .view-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .view-actions .btn,
    .view-actions select {
        width: 100% !important;
    }

    /* Horizontal Scroll for Tables within Single Page */
    .table-wrapper {
        width: calc(100% + 32px) !important;
        /* Bleed out to edges */
        margin: 0 -16px 20px -16px !important;
        border-radius: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .data-table {
        min-width: 600px !important;
    }

    /* Modal Mobile optimization */
    .modal-content {
        width: 95% !important;
        margin: 20px auto !important;
        padding: 15px !important;
        max-height: 85vh !important;
    }

    #versionFooter.dashboard-version-footer {
        width: 100% !important;
        max-width: none !important;
    }

    .dashboard-version-footer-row {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .dashboard-version-footer-left,
    .deployed-domain-footer-status,
    .deployed-license-footer-block {
        justify-self: center;
        text-align: center;
    }

    .deployed-domain-footer-host,
    #deployedDomainStatus #deployedDomainHostnameHeader {
        max-width: min(280px, 88vw);
    }

    .deployed-license-footer-inner {
        justify-content: center;
    }

    .deployed-license-footer-copy {
        align-items: center;
        text-align: center;
    }

    body.deployed-license-footer-active .deployed-domain-fixed {
        bottom: 120px;
    }

    body.deployed-license-footer-active .move-to-top-btn {
        bottom: 132px;
    }
}

/* Full-width sticky strip: new marketplace / support unread (above version footer) */
.marketplace-footer-alerts-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10012;
    padding: 10px 16px 12px;
    background: var(--bg-secondary, #1a1d24);
    border-top: 2px solid var(--accent, #3b82f6);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.22);
}

.marketplace-footer-alerts-inner {
    max-width: min(960px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.marketplace-footer-alerts-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.45;
    flex: 1;
    min-width: 200px;
}

body.marketplace-footer-alert-visible .dashboard-version-footer {
    bottom: 56px;
}

body.marketplace-footer-alert-visible .move-to-top-btn {
    bottom: 68px;
}

body.deployed-license-footer-active.marketplace-footer-alert-visible .deployed-domain-fixed {
    bottom: 144px;
}

body.deployed-license-footer-active.marketplace-footer-alert-visible .move-to-top-btn {
    bottom: 156px;
}

.anti-redirect-orders-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.anti-redirect-order-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
}

.anti-redirect-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 8px;
}

.ar-order-badge {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
}

.ar-customer-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.ar-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ar-paid {
    margin-left: auto;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.ar-template-line {
    font-size: 13px;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.ar-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ar-reply-panel,
.ar-thread-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.ar-reply-panel .ar-reply-ta {
    margin-bottom: 8px;
    width: 100%;
}

.ar-reply-files {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
}

.ar-msg-row {
    margin-bottom: 10px;
    font-size: 12px;
}

.ar-msg-meta {
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.ar-msg-body {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 12px;
}

body.dashboard-footer-active {
    padding-bottom: 52px;
}

body.dashboard-footer-active .content-area {
    scroll-padding-bottom: 56px;
}

/* Bottom strip: version (left) + license countdown (right) — full width so it does not stack on bottom-left controls */
.dashboard-version-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Above light-theme film grain (z-index 9998) so license/version stay readable */
    z-index: 100800;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 14px 10px;
    min-height: 44px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.dashboard-version-footer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 16px;
    width: 100%;
    max-width: min(1400px, 100%);
    margin: 0 auto;
}

.dashboard-version-footer-left {
    justify-self: start;
    min-width: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-version-label {
    font-size: 12px;
    color: var(--text-muted);
}

.deployed-license-footer-block[hidden] {
    display: none !important;
}

.deployed-license-footer-block {
    justify-self: end;
    max-width: min(520px, 100%);
    text-align: right;
}

.deployed-license-footer-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.deployed-license-ring-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.deployed-license-ring-svg {
    display: block;
}

.deployed-license-ring-bg {
    stroke: var(--bg-tertiary, rgba(255, 255, 255, 0.08));
    stroke-width: 2.5;
}

.deployed-license-ring-progress {
    stroke: var(--accent);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 103.67 103.67;
    stroke-dashoffset: 103.67;
    transition: stroke-dashoffset 0.35s ease, stroke 0.2s ease;
}

.deployed-license-ring-progress.is-warn {
    stroke: #f59e0b;
}

.deployed-license-ring-progress.is-critical {
    stroke: #f97316;
}

.deployed-license-ring-progress.is-expired,
.deployed-license-ring-progress.is-suspended {
    stroke: var(--danger, #ef4444);
    stroke-dashoffset: 103.67 !important;
}

.deployed-license-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    pointer-events: none;
}

.deployed-license-footer-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-items: flex-end;
    text-align: right;
}

.deployed-license-footer-primary {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.deployed-license-footer-secondary {
    font-size: 11px;
    color: var(--text-muted);
}

.deployed-license-footer-primary.is-warn {
    color: #f59e0b;
}

.deployed-license-footer-primary.is-critical {
    color: #f97316;
}

.deployed-license-footer-primary.is-expired,
.deployed-license-footer-primary.is-suspended {
    color: var(--danger, #ef4444);
}

body.deployed-license-footer-active .move-to-top-btn {
    bottom: 104px;
}

.panel-guide-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.panel-guide-modal.active,
.panel-guide-modal[style*="display: flex"],
.panel-guide-modal[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 12000 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.panel-guide-modal.active .panel-guide-modal__dialog {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

.panel-guide-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}
.panel-guide-modal__dialog {
    position: relative;
    width: min(1200px, 98vw);
    max-height: min(94vh, 980px);
    height: min(94vh, 980px);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.panel-guide-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    flex-shrink: 0;
}
.panel-guide-modal__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.panel-guide-modal__head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.panel-guide-modal__iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: var(--bg-primary);
}

/* Fixed bottom-right (content side) — avoids sidebar Settings / nav clash */
.move-to-top-btn {
    position: fixed;
    bottom: 58px;
    right: max(20px, env(safe-area-inset-right, 0px));
    left: auto;
    z-index: 100810;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.move-to-top-btn.move-to-top-btn--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.move-to-top-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

/* Top-right floating toasts (settings saved, scan started, etc.) — above sticky footer */
.dashboard-toast-stack {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: max(20px, env(safe-area-inset-right, 0px));
    z-index: var(--z-dashboard-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 32px));
}
.dashboard-toast {
    pointer-events: none;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary, #f9fafb);
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--border-color, #374151);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.dashboard-toast--success {
    border-color: rgba(16, 185, 129, 0.45);
}
.dashboard-toast--error {
    border-color: rgba(239, 68, 68, 0.55);
    color: var(--danger, #fecaca);
}
.dashboard-toast--pending {
    border-color: rgba(59, 130, 246, 0.5);
    color: var(--text-primary, #f9fafb);
}
.dashboard-toast.dashboard-toast--save-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: left;
}
.dashboard-save-overlay-msg {
    flex: 0 1 auto;
    min-width: 0;
}
.dashboard-save-spinner {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--accent, #3b82f6) 28%, transparent);
    border-top-color: var(--accent, #3b82f6);
    animation: dashboard-save-spin 0.65s linear infinite;
}
@keyframes dashboard-save-spin {
    to {
        transform: rotate(360deg);
    }
}
.dashboard-toast.dashboard-toast--show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dashboard-toast.dashboard-toast--hide {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
}

/* Center + dim overlay (settings saved / save errors) — short, snappy, no corner clutter */
.dashboard-save-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-dashboard-alert);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.26);
    opacity: 0;
    transition: opacity 0.14s ease-out;
    pointer-events: none;
}
.dashboard-save-overlay.dashboard-save-overlay--show {
    opacity: 1;
}
.dashboard-toast.dashboard-toast--center {
    pointer-events: none;
    max-width: min(420px, 100%);
    padding: 16px 28px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}
.dashboard-toast.dashboard-toast--center.dashboard-toast--show {
    opacity: 1;
    transform: scale(1);
}
.dashboard-toast.dashboard-toast--center.dashboard-toast--hide {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.12s ease-in, transform 0.12s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-save-overlay,
    .dashboard-toast.dashboard-toast--center {
        transition-duration: 0.01ms;
    }
    .dashboard-save-spinner {
        animation: none;
        border-color: color-mix(in srgb, var(--accent, #3b82f6) 40%, transparent);
        border-top-color: var(--accent, #3b82f6);
        opacity: 0.9;
    }
}

@media (max-width: 480px) {
    .app-header {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .app-header-top {
        gap: 0 !important;
        padding: 4px 6px !important;
        flex-wrap: nowrap !important;
    }

    .app-header-brand {
        padding: 0 6px !important;
    }

    .app-header-ticker {
        padding: 5px 8px !important;
        min-height: 34px;
        gap: 6px;
    }

    .app-header-ticker-label {
        max-width: 3.6rem;
        padding: 2px 5px;
    }

    .app-header-top .header-btn span:not(.marketplace-notif-count) {
        display: none;
    }

    .app-header-top .header-btn {
        padding: 6px !important;
        min-width: 32px;
        justify-content: center;
    }

    .header-left,
    .header-right {
        justify-content: center;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 20px;
    }
}

/* Proxy Generator */
.proxy-generator {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.generator-card,
.services-card,
.generated-url-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
}

.generator-card h3,
.services-card h3,
.generated-url-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.generator-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.generator-form .form-group {
    flex: 1;
    margin-bottom: 0;
}

select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.url-display-box {
    display: flex;
    gap: 12px;
    align-items: center;
}

.url-display-box .form-input {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

/* Utility Classes */
.monospace {
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.text-muted {
    color: var(--text-muted);
}

/* Quill Editor Customization */
.ql-toolbar.ql-snow {
    border-color: var(--border-color) !important;
    background: var(--bg-tertiary) !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.ql-container.ql-snow {
    border-color: var(--border-color) !important;
    background: white;
    color: #333;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

.ql-editor {
    min-height: 150px;
}

.ql-snow .ql-stroke {
    stroke: var(--text-secondary) !important;
}

.ql-snow .ql-fill {
    fill: var(--text-secondary) !important;
}

.ql-snow .ql-picker {
    color: var(--text-secondary) !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-active {
    color: var(--accent) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-active .ql-stroke {
    stroke: var(--accent) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-active .ql-fill {
    fill: var(--accent) !important;
}

/* Marketplace header bell + popover */
.marketplace-notif-bell-wrap {
    position: relative;
    flex-shrink: 0;
}

.marketplace-notif-bell-btn {
    position: relative;
}

.marketplace-notif-count {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.marketplace-notif-bell-wrap.marketplace-notif-pulse .marketplace-notif-bell-btn {
    animation: marketplaceBellPulse 2s ease-in-out infinite;
}

@keyframes marketplaceBellPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
    }
}

.marketplace-notif-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, 92vw);
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    z-index: 2000;
}

.marketplace-notif-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
}

.marketplace-notif-list {
    overflow-y: auto;
    max-height: 320px;
    padding: 6px;
}

.marketplace-notif-empty {
    padding: 16px 12px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

.marketplace-notif-item {
    padding: 10px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    font-size: 12px;
}

.marketplace-notif-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.marketplace-notif-item-body {
    color: var(--text-muted);
    line-height: 1.35;
    margin-bottom: 8px;
    word-break: break-word;
}

/* Marketplace nav ticker (sidebar) */
.nav-link-marketplace .nav-link-marketplace-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.nav-link-marketplace-title {
    line-height: 1.2;
}

.marketplace-nav-ticker-track {
    width: 100%;
    max-width: 148px;
    overflow: hidden;
    height: 14px;
    line-height: 14px;
}

.marketplace-nav-ticker-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    padding-right: 2rem;
    animation: marketplaceNavMarquee 14s linear infinite;
}

@keyframes marketplaceNavMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Deployment view — tabs + tighter sections */
.deployment-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 8px 0 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(to bottom, var(--bg-primary, #0b0f14) 70%, transparent);
    border-bottom: 1px solid var(--border-color);
}

.deployment-subtabs button {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary, #9ca3af);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.deployment-subtabs button:hover {
    color: var(--text-primary);
    border-color: var(--accent, #3b82f6);
}

.deployment-subtabs button.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .deployment-subtabs button {
        flex: 1 1 auto;
        min-width: calc(33% - 4px);
        justify-content: center;
    }
}

.deployment-tab-panel {
    display: none;
    animation: mpFadeIn 0.12s ease;
}

.deployment-tab-panel.active {
    display: block;
}

body[data-dashboard-is-deployed="true"] #deploymentView,
body[data-dashboard-is-deployed="true"] #deploymentView .deployment-tab-panel,
body[data-dashboard-is-deployed="true"] #deploymentActivitySection,
body[data-dashboard-is-deployed="true"] #recentDeploymentsSection {
    display: none !important;
}

body[data-dashboard-is-deployed="true"] #tourStepEngineSelect {
    display: none !important;
}

#deploymentView .deployment-view-section.section {
    padding: 16px 18px;
    margin-bottom: 12px;
}

#deploymentView .section-header h3 {
    margin-bottom: 0;
}

.deployment-servers-grouped {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Graph templates — dense grid, small preview thumbnails */
.graph-templates-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    gap: 8px !important;
}

.graph-template-card.graph-template-card--compact {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    min-height: 0;
    border-radius: 8px;
}

.graph-template-card-thumb-wrap {
    height: 68px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3px 4px 0;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.15));
}

.graph-template-card-thumb-wrap > * {
    flex-shrink: 0;
    transform: scale(0.62);
    transform-origin: top center;
    width: 108%;
    max-width: none;
}

.graph-template-card-caption {
    padding: 5px 6px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.graph-stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.graph-session-actions-cell .graph-session-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    gap: 6px;
    align-items: stretch;
}

.graph-stat-card.graph-stat-card--compact {
    cursor: pointer;
    text-align: left;
    padding: 8px 12px;
    min-width: 0;
    flex: 1 1 100px;
    max-width: 160px;
}

.graph-stat-card--compact .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.graph-stat-card--compact .stat-value {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}

.graph-template-bg-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #60a5fa);
    user-select: none;
}

.graph-template-bg-details[open] .graph-template-bg-summary {
    margin-bottom: 0;
}

.deployment-server-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.deployment-server-filters button {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary, #9ca3af);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.deployment-server-filters button:hover {
    color: var(--text-primary);
    border-color: var(--accent, #3b82f6);
}

.deployment-server-filters button.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--text-primary);
}

.deployment-server-filters .dep-filter-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 1.4em;
    text-align: center;
}

.deployment-server-filters button.active .dep-filter-count {
    color: var(--accent, #60a5fa);
    background: rgba(59, 130, 246, 0.12);
}

.deployment-server-filters button[data-dep-server-filter="errors"] .dep-filter-count:not(:empty) {
    color: var(--danger, #ef4444);
}

.deployment-server-filters button[data-dep-server-filter="offline"] .dep-filter-count:not(:empty) {
    color: var(--danger, #ef4444);
}

.deployment-server-filters button[data-dep-server-filter="expired"] .dep-filter-count:not(:empty) {
    color: var(--warning, #f59e0b);
}

.deployment-server-group-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: -4px 0 10px 0;
    line-height: 1.45;
}

.deployment-server-group-expired .deployment-server-group-title {
    color: var(--warning, #f59e0b);
}

.deployment-server-group-errors .deployment-server-group-title {
    color: var(--danger, #ef4444);
}

.deployment-server-group-offline .deployment-server-group-title {
    color: var(--danger, #ef4444);
}

.deployment-error-reason {
    font-size: 11px;
    color: var(--danger, #ef4444);
    margin-top: 4px;
    max-width: 220px;
    line-height: 1.35;
    word-break: break-word;
}

.deployment-server-empty-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.deployment-server-empty-filter strong {
    color: var(--text-primary);
    font-size: 14px;
}

.deployment-server-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deployment-server-group-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 999px;
}

.deployment-server-compact-table td {
    vertical-align: middle;
    font-size: 13px;
}

.deployment-row-main {
    cursor: pointer;
}

.deployment-row-main:hover {
    background: var(--bg-hover);
}

.deployment-server-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.deployment-server-pagination-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.deployment-server-pagination .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.deploy-actions-button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.deploy-actions-button-grid .btn {
    width: 100%;
    justify-content: center;
}

.marketplace-listing-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.marketplace-feature-pill {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* Contact extraction: background banner, completion toast, Extractions FAB */
.graph-contact-extract-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10055;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-secondary, #1f2937);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}
.graph-contact-extract-banner-text {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

.graph-contact-extract-toast {
    position: fixed;
    bottom: 124px;
    left: 20px;
    z-index: 10062;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
    padding: 28px 36px 14px 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--accent, #0078d4);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}
.graph-contact-extract-toast #graphContactExtractToastMsg {
    margin: 0;
}
.graph-contact-extract-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 4px;
}

.graph-profile-mx-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}
.graph-profile-mx-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.graph-profile-mx-label {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 140px;
}

body.deployed-license-footer-active .graph-contact-extract-toast {
    bottom: 136px;
}

/* Themed context menu (replaces browser default on dashboard shell; see admin-panel-hardening.js) */
.admin-panel-context-menu {
    position: fixed;
    z-index: 100600;
    min-width: 200px;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.admin-panel-context-menu__title {
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.admin-panel-context-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
}
.admin-panel-context-menu__item:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.admin-panel-context-menu__item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* File Senders */
#fileSendersView.active {
    display: block !important;
    visibility: visible;
    min-height: 400px;
}
.fs-sender-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.fs-sender-tabs .tab-btn {
    flex: 0 0 auto;
}
.fs-view-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
#fileSendersView,
#threeDMtaView {
    position: relative;
}
/* 3D MTA: gate dims full view (like CRM); subtabs stay clickable through overlay */
#threeDMtaView > #mtaActivationGate {
    pointer-events: none;
}
#threeDMtaView > #mtaActivationGate .feature-activation-gate-card {
    pointer-events: auto;
}
#mtaBlurWrap {
    position: relative;
}
.feature-activation-gate {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 10, 10, 0.35);
    pointer-events: auto;
}
.feature-activation-gate[hidden] {
    display: none !important;
}
.feature-activation-gate-card {
    max-width: 420px;
    width: 100%;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.feature-activation-gate-card h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}
.feature-activation-gate-card .form-input {
    margin: 12px 0;
}
.feature-activation-gate-error {
    color: var(--danger, #f1707a);
    font-size: 0.85rem;
    min-height: 1.2em;
    margin: 8px 0 0;
}
.feature-activation-gate-blur.is-locked {
    filter: blur(5px);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.feature-activation-gate-blur.is-locked .feature-activation-gate {
    pointer-events: auto;
    filter: none;
    opacity: 1;
    user-select: auto;
}
/* Deployed 3D MTA: Servers + Cloudflare stay usable while deploy/activity is locked */
.feature-activation-gate-blur.is-locked .mta-tab-panel[data-mta-panel="servers"],
.feature-activation-gate-blur.is-locked .mta-tab-panel[data-mta-panel="cloudflare"],
#mtaBlurWrap.is-locked ~ .mta-tab-panel[data-mta-panel="servers"],
#mtaBlurWrap.is-locked ~ .mta-tab-panel[data-mta-panel="cloudflare"] {
    pointer-events: auto !important;
    filter: none !important;
    opacity: 1 !important;
    user-select: auto !important;
}
/* Server/CF modals live inside blur wrap — keep clickable while deploy is locked */
.feature-activation-gate-blur.is-locked .modal,
#mtaBlurWrap.is-locked .modal {
    pointer-events: auto !important;
    filter: none !important;
    opacity: 1 !important;
    user-select: auto !important;
}
.nav-link.nav-feature-locked::after {
    content: '🔒';
    font-size: 11px;
    margin-left: 6px;
    opacity: 0.75;
}
.nav-link.nav-feature-trial::after {
    content: 'Trial';
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent, #38bdf8);
    opacity: 1;
}
.nav-link.nav-feature-activated::after {
    content: none;
}
.feature-subscription-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.feature-subscription-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-color, #2d3640);
}
.feature-subscription-badge.is-activated {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}
.feature-subscription-badge.is-free-trial {
    background: rgba(56, 189, 248, 0.12);
    color: var(--accent, #38bdf8);
    border-color: rgba(56, 189, 248, 0.35);
}
.feature-subscription-badge.is-no-subscription {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
}
.feature-subscription-key {
    max-width: 220px;
    min-width: 160px;
    padding: 6px 10px;
    font-size: 12px;
}
.feature-subscription-error {
    margin: 0;
    font-size: 12px;
    color: var(--danger, #f87171);
    width: 100%;
}
.fs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px;
    align-items: start;
}
.fs-layout.fs-layout--or-only {
    grid-template-columns: 1fr;
}
.fs-layout.fs-layout--or-only .fs-output-panel {
    display: none !important;
}
#automationView[data-auto-tab="openredirect"] #autoOutputPanel {
    display: none !important;
}
@media (max-width: 1100px) {
    .fs-layout {
        grid-template-columns: 1fr;
    }
    .fs-output-panel {
        order: -1;
        max-height: 220px;
    }
}
.fs-main {
    min-width: 0;
}
.fs-sender-panel {
    padding: 14px 16px;
    min-height: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.fs-sender-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.fs-output-panel {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    max-height: calc(100vh - 160px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.fs-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.fs-output-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.fs-output-debug-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    opacity: 0.72;
    flex-shrink: 0;
}
.fs-output-debug-toggle:hover {
    opacity: 1;
}
.fs-output-debug-toggle input {
    width: 11px;
    height: 11px;
    margin: 0;
    cursor: pointer;
    accent-color: #22c55e;
}
.fs-output-debug-toggle input:checked + span {
    color: #4ade80;
}
.fs-output-panel.fs-output-panel--running .fs-output-title {
    color: #22c55e;
}
.fs-output-job-loader {
    position: relative;
    height: 3px;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(34, 197, 94, 0.12);
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.fs-output-job-loader.is-active {
    opacity: 1;
    --fs-job-pulse-ms: 680ms;
    animation: fsJobOutputPulse var(--fs-job-pulse-ms) ease-in-out infinite;
}
.fs-output-job-loader__beam {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 32%;
    min-width: 72px;
    background: linear-gradient(90deg, transparent, #22c55e 18%, #86efac 50%, #22c55e 82%, transparent);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.75), 0 0 2px rgba(34, 197, 94, 0.9);
    animation: fsJobOutputSweep 1.1s ease-in-out infinite alternate;
    pointer-events: none;
}
.fs-output-panel.fs-output-panel--running {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08), 0 0 18px rgba(34, 197, 94, 0.12);
}
@keyframes fsJobOutputSweep {
    0% { transform: translateX(-8%); }
    100% { transform: translateX(320%); }
}
@keyframes fsJobOutputPulse {
    0%, 100% { background-color: rgba(34, 197, 94, 0.1); }
    50% { background-color: rgba(34, 197, 94, 0.28); }
}
.fs-output-log {
    flex: 1;
    margin: 0;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #4ade80;
    background: transparent;
}
.fs-preview-frame {
    width: 100%;
    min-height: 200px;
    height: 240px;
    border: 0;
    background: #fff;
}
.fs-template-block textarea.form-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}
.fs-header-badge {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
}
/* CRM Sender modals: portaled to body — above sticky header, below global tour (10050+) */
.modal.fs-modal-layer {
    z-index: 10200;
    padding: calc(var(--shell-bar-h) + var(--shell-ribbon-h) + 16px) 20px 24px;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}
.modal.fs-modal-layer .fs-modal-content {
    max-height: calc(100vh - var(--shell-bar-h) - var(--shell-ribbon-h) - 48px);
}
.fs-modal-content {
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.fs-modal-content-wide {
    max-width: min(1100px, 96vw);
}
.fs-modal-content-wide .fs-preview-frame {
    min-height: 420px;
}
.fs-modal-content .modal-body {
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.fs-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.fs-modal-textarea {
    min-height: 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    resize: vertical;
}
.fs-install-modal {
    max-width: 440px;
}
.fs-alert-modal {
    max-width: 460px;
}
.fs-alert-modal-body {
    padding: 20px 24px 8px;
}
.fs-alert-modal-message {
    margin: 0;
    line-height: 1.55;
    color: var(--text-primary, #e5e7eb);
    white-space: pre-wrap;
}
.fs-field-highlight {
    outline: 2px solid #ef4444 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22);
    animation: fsFieldPulse 1.1s ease 2;
}
@keyframes fsFieldPulse {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.34);
    }
}
.fs-install-modal-body {
    text-align: center;
    padding: 28px 20px 24px;
}
.fs-install-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 3px solid rgba(34, 197, 94, 0.2);
    border-top-color: #22c55e;
    border-radius: 50%;
    animation: fsInstallSpin 0.85s linear infinite;
}
.fs-install-modal--done .fs-install-spinner,
.fs-install-modal--error .fs-install-spinner {
    display: none;
}
.fs-install-modal-status {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary, #e5e7eb);
}
.fs-install-modal--success .fs-install-modal-status {
    color: #22c55e;
}
.fs-install-modal--error .fs-install-modal-status {
    color: #ef4444;
}
.fs-install-modal-detail {
    margin: 0;
    line-height: 1.5;
}
.fs-install-log {
    margin: 14px 0 0;
    padding: 10px 12px;
    max-height: 140px;
    overflow: auto;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-primary, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
}
@keyframes fsInstallSpin {
    to {
        transform: rotate(360deg);
    }
}
.fs-preview-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
    align-items: stretch;
}
.fs-preview-edit-grid.fs-preview-only {
    grid-template-columns: 1fr;
}
.fs-preview-edit-grid .fs-source-col textarea {
    min-height: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    resize: vertical;
}
.fs-preview-col {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.fs-preview-col-title {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fs-preview-frame {
    flex: 1;
    width: 100%;
    min-height: 280px;
    border: 0;
    background: #fff;
}
.fs-message-preview-frame {
    min-height: 220px;
    height: 220px;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.fs-subject-preview {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.45;
    background: var(--bg-secondary, #f9fafb);
    word-break: break-word;
}
.fs-session-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    background: #9ca3af;
}
.fs-session-dot--ready {
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}
.fs-session-dot--missing {
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.fs-session-dot--na {
    display: none;
}
.fs-sender-tabs .fs-session-dot {
    margin-left: 4px;
}
.fs-cred-status-banner {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}
.fs-cred-status-banner.ready {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.35);
}
.fs-cred-status-banner.missing {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.3);
}
.fs-cred-checklist {
    margin: 0 0 12px 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}
.fs-cred-checklist li.ok {
    color: #15803d;
}
.fs-cred-checklist li.bad {
    color: #b91c1c;
}
.fs-cred-checklist li.optional {
    color: var(--text-muted, #6b7280);
}
.fs-traffic-light {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.fs-traffic-light--ready {
    background: #22c55e;
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.22),
        0 0 10px rgba(34, 197, 94, 0.55);
}
.fs-traffic-light--not-ready {
    background: #ef4444;
    box-shadow:
        0 0 0 2px rgba(239, 68, 68, 0.2),
        0 0 10px rgba(239, 68, 68, 0.48);
}
.fs-sender-tabs .fs-traffic-light,
#fsOpenCredentialsModal .fs-traffic-light {
    margin-left: 6px;
}
.fs-session-ready-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 999px;
    margin-bottom: 0;
    line-height: 0;
    cursor: default;
}
.fs-session-ready-pill.ready {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.28);
}
.fs-session-ready-pill.missing {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.26);
}
@media (max-width: 900px) {
    .fs-preview-edit-grid {
        grid-template-columns: 1fr;
    }
}
.fs-sent-log-list {
    margin: 0;
    max-height: 160px;
    overflow: auto;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bg-primary, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
}
.fs-sent-log-list-modal {
    max-height: min(50vh, 420px);
    min-height: 200px;
}

/* 3D Browser download cards */
.browser-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
    margin-top: 6px;
    max-width: 720px;
}
.browser-dl-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, rgba(220, 38, 38, 0.06), rgba(15, 10, 12, 0.4));
}
.browser-dl-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.browser-dl-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.browser-dl-card__icon svg {
    width: 18px;
    height: 18px;
}
.browser-dl-card__icon--win {
    color: #60a5fa;
}
.browser-dl-card__icon--mac {
    color: #e5e7eb;
}
.browser-dl-card__title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    margin: 0;
    color: var(--text-primary);
}
.browser-dl-card__sub {
    margin: 1px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-muted);
}
.browser-dl-card__meta {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}
.browser-dl-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding: 5px 10px;
    font-size: 12px;
    min-height: 28px;
}
.browser-dl-card.is-unavailable {
    opacity: 0.55;
}
.browser-dl-card.is-unavailable .browser-dl-card__btn {
    pointer-events: none;
}

/* 3D Browser auto-sync service picker */
.browser-autosync-services {
    margin-top: 10px;
    max-width: 720px;
}
.browser-autosync-services.is-disabled {
    opacity: 0.55;
}
.browser-autosync-services__lead {
    margin: 0 0 8px;
}
.browser-autosync-services__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.browser-autosync-services__grid.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.browser-autosync-service {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.browser-autosync-service input {
    margin: 0;
    accent-color: var(--accent-color, #dc2626);
}
.browser-autosync-service:has(input:checked) {
    border-color: rgba(220, 38, 38, 0.45);
    background: rgba(220, 38, 38, 0.08);
}

/* 3D RMM — server table name selection (matches 3D MTA deployment-row-main) */
#threeDRmmView tr.rmm-row-selected td {
    background: color-mix(in srgb, var(--accent-color, #dc2626) 8%, transparent);
}
#threeDRmmView .dash3d-rmm-server-row .dash3d-rmm-row-name {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}
#threeDRmmView .dash3d-rmm-server-row .dash3d-rmm-row-name:hover {
    color: var(--accent-color, #dc2626);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#threeDRmmView .dash3d-rmm-server-row .dash3d-rmm-row-actions {
    white-space: nowrap;
}
#threeDRmmView .dash3d-rmm-server-row .dash3d-rmm-row-actions .btn {
    margin-right: 4px;
}
#threeDRmmView .dash3d-rmm-server-row .dash3d-rmm-row-actions .btn:last-child {
    margin-right: 0;
}

/* Dashboard hub views (Extra tools, Creator Tools) */
.dashboard-hub-tabs {
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.dashboard-hub-panels {
    min-height: 0;
}
.dashboard-hub-panels > .view.dashboard-hub-embedded {
    display: none;
    padding: 0;
    min-height: 0;
}
.dashboard-hub-panels > .view.dashboard-hub-embedded.is-hub-panel-active {
    display: block;
}
.dashboard-hub-panels > .view.dashboard-hub-embedded > .view-header:first-child {
    display: none;
}
.dashboard-hub-static-panel .section {
    margin-bottom: 0;
}
.nav-link-label-with-ms {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.nav-ms-thumb {
    flex-shrink: 0;
    opacity: 0.92;
    margin-top: 1px;
}
.deployment-servury-mount > .view.deployment-servury-embedded {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
}
.deployment-fps-tunnel-mount > .view.deployment-fps-tunnel-embedded {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* CRM Senders — module hub + standalone full workspace */
#fileSendersView.fs-mode-hub .fs-full-only {
    display: none !important;
}
#fileSendersView.fs-mode-full .fs-hub-only {
    display: none !important;
}
#fileSendersView.fs-mode-full #fsWorkspace.fs-full-only,
#fileSendersView.fs-mode-full .fs-full-only#fsWorkspace {
    display: block;
}
#fileSendersView.fs-mode-full .fs-layout {
    display: flex;
}
#fileSendersView.fs-mode-full .fs-view-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.fs-module-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.fs-module-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    overflow: hidden;
}
.fs-module-card:hover {
    border-color: var(--accent, #0F6CBD);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.fs-module-card-thumb {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
}
:root.dark-theme .fs-module-card-thumb,
:root.red-theme .fs-module-card-thumb,
html.red-theme .fs-module-card-thumb {
    background: #f8fafc;
}
.fs-module-card-thumb img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}
.fs-module-card-thumb span {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fs-module-tone, #64748b);
}
.fs-module-card-body {
    padding: 12px 14px 14px;
}
.fs-module-card-body h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}
.fs-module-card-body p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}
.fs-module-card-cta {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent, #0F6CBD);
}
.fs-module-card-warn {
    color: var(--danger, #dc2626);
    font-size: 10px;
}
html.fs-sender-standalone .sidebar,
html.fs-sender-standalone .sidebar-backdrop,
html.fs-sender-standalone #quickUrlTriggerRail,
html.fs-sender-standalone .header-quick-actions {
    display: none !important;
}
html.fs-sender-standalone .app-container {
    grid-template-columns: 1fr;
}
html.fs-sender-standalone .content-area {
    max-width: none;
}
html.fs-sender-standalone #fileSendersView {
    display: block !important;
    max-width: 1600px;
}
body.crm-sender-workload-host .nav-link:not([data-view="threeDCrmSender"]):not(#logoutBtn) {
    /* keep sidebar usable; deploy tab hidden via JS */
}
.overview-visitors-section .table-wrapper {
    margin-top: 12px;
}
.overview-visitors-section .pagination-container {
    margin-top: 12px;
}

/* Workload deploy — module preview cards (CRM Senders / Leads Management) */
.workload-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}
.workload-module-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    min-height: 72px;
}
.workload-module-card h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.workload-module-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* 3D RMM — deployed assigned-server cards */
.dash3d-rmm-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-bottom: 0;
}
.dash3d-rmm-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, rgba(220, 38, 38, 0.05), var(--bg-secondary));
    min-height: 180px;
}
.dash3d-rmm-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.dash3d-rmm-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}
.dash3d-rmm-card__title-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    word-break: break-word;
}
.dash3d-rmm-card__title-btn:hover {
    color: var(--accent-color, #dc2626);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dash3d-rmm-card__meta {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.dash3d-rmm-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}
.dash3d-rmm-assign-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash3d-rmm-assign-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
}
.dash3d-rmm-assign-row input {
    margin-top: 3px;
    accent-color: var(--accent-color, #dc2626);
}
.dash3d-rmm-assign-row__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dash3d-rmm-assign-row__label strong {
    font-size: 13px;
}
.dash3d-rmm-assign-row__label span {
    font-size: 12px;
    color: var(--text-secondary);
}
#threeDMdmView .dash3d-rmm-server-row .dash3d-rmm-row-name {
    cursor: pointer;
}
#threeDMdmView .dash3d-rmm-server-row .dash3d-rmm-row-name:hover {
    color: var(--accent-color, #dc2626);
}
#threeDMdmView .dash3d-rmm-server-row .dash3d-rmm-row-actions {
    white-space: nowrap;
}
#threeDMdmView .dash3d-rmm-server-row .dash3d-rmm-row-actions .btn {
    margin-bottom: 4px;
}
#threeDMdmView .dash3d-rmm-server-row .dash3d-rmm-row-actions .btn:last-child {
    margin-bottom: 0;
}
.dash3d-rmm-assign-row:has(input:checked) {
    border-color: rgba(220, 38, 38, 0.45);
    background: rgba(220, 38, 38, 0.06);
}

.auto-or-scan-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.auto-or-scan-pill.is-running {
    border-color: rgba(0, 113, 227, 0.35);
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}
.auto-or-scan-pill.is-ready {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}
.auto-or-scan-pill.is-bad {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.auto-cl-live-badge,
.auto-cl-raw-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.auto-cl-live-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.auto-cl-raw-badge {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.auto-cl-type--smtp { color: #0071e3; }
.auto-cl-type--aws { color: #f59e0b; }
.auto-cl-type--sendgrid { color: #8b5cf6; }

.auto-or-log-pre {
    margin: 0;
    max-height: min(62vh, 520px);
    overflow: auto;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--border-color, #374151);
    border-radius: 8px;
    color: var(--text-primary, #f3f4f6);
}

/* Open redirect scan calendar (Automation tab) */
.or-calendar {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    max-width: 248px;
}

.or-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
}

.or-cal-title {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.or-cal-nav {
    min-width: 24px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1.2;
}

.or-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.or-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.or-cal-cell {
    min-height: 30px;
}

.or-cal-cell--empty {
    min-height: 0;
}

.or-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    min-height: 30px;
    padding: 2px 1px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: default;
    font: inherit;
    line-height: 1;
}

.or-cal-day:not(:disabled) {
    cursor: pointer;
}

.or-cal-day:not(:disabled):hover {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-tertiary));
}

.or-cal-day--hits {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-tertiary));
}

.or-cal-day--scanned {
    border-color: color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

.or-cal-hit-count--zero {
    color: var(--text-secondary);
    font-weight: 600;
    visibility: visible;
}

.or-cal-day--selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary));
    color: var(--text);
}

.or-cal-day--today .or-cal-day-num {
    box-shadow: 0 0 0 1px var(--accent);
    border-radius: 999px;
    min-width: 1.2em;
}

.or-cal-hit-count {
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: var(--danger);
    min-height: 8px;
}

.or-cal-hit-count--empty {
    visibility: hidden;
}

.or-cal-day-num {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

#autoOrShowAll.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary));
}

/* Open redirect hits — domain groups + score badges */
.or-hit-domain-cell {
    display: block;
    min-width: 0;
}

.or-hit-domain-name {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-secondary);
    word-break: break-all;
}

.or-hit-count-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #3b82f6 18%, var(--bg-tertiary));
    color: #60a5fa;
}

.or-hit-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.or-hit-score-letter {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    min-width: 1.1em;
    text-align: center;
}

.or-hit-score-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
}

.or-hit-score-grade {
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 4px;
}

.or-hit-score--A .or-hit-score-letter,
.or-hit-score--excellent .or-hit-score-letter { color: #22c55e; }
.or-hit-score--A .or-hit-score-grade,
.or-hit-score--excellent .or-hit-score-grade { background: color-mix(in srgb, #22c55e 20%, transparent); color: #22c55e; }
.or-hit-score--B .or-hit-score-letter,
.or-hit-score--good .or-hit-score-letter { color: #84cc16; }
.or-hit-score--B .or-hit-score-grade,
.or-hit-score--good .or-hit-score-grade { background: color-mix(in srgb, #84cc16 20%, transparent); color: #84cc16; }
.or-hit-score--C .or-hit-score-letter,
.or-hit-score--fair .or-hit-score-letter { color: #eab308; }
.or-hit-score--C .or-hit-score-grade,
.or-hit-score--fair .or-hit-score-grade { background: color-mix(in srgb, #eab308 20%, transparent); color: #eab308; }
.or-hit-score--D .or-hit-score-letter,
.or-hit-score--risky .or-hit-score-letter { color: #f97316; }
.or-hit-score--D .or-hit-score-grade,
.or-hit-score--risky .or-hit-score-grade { background: color-mix(in srgb, #f97316 20%, transparent); color: #f97316; }
.or-hit-score--F .or-hit-score-letter,
.or-hit-score--burned .or-hit-score-letter { color: #ef4444; }
.or-hit-score--F .or-hit-score-grade,
.or-hit-score--burned .or-hit-score-grade { background: color-mix(in srgb, #ef4444 22%, transparent); color: #ef4444; }
.or-hit-score--pending .or-hit-score-letter { color: var(--text-secondary); }

.or-hit-bl-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, #ef4444 22%, transparent);
    color: #ef4444;
}

.or-hit-ok-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #22c55e;
}

.or-hit-urls-preview {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    max-width: none;
}

#autoOrHitsTable th:last-child,
#autoOrHitsTable td:last-child {
    width: 128px;
    min-width: 128px;
    text-align: right;
    vertical-align: top;
}

.or-hit-child td {
    background: color-mix(in srgb, #3b82f6 6%, var(--bg-secondary));
    border-top: none;
    padding-top: 6px;
    padding-bottom: 6px;
}

.or-hit-child-idx {
    white-space: nowrap;
    vertical-align: top;
    padding-left: 22px;
}

.or-hit-child-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    vertical-align: top;
    min-width: 0;
}

.or-hit-child-actions {
    vertical-align: top;
}

.or-hit-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: flex-start;
}

.sneaky-installed-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    color: #22c55e;
    background: color-mix(in srgb, #22c55e 16%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}

/* Add custom domain modal */
.deployed-add-domain {
    padding: 4px 2px 2px;
}
.deployed-add-mode-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.deployed-add-mode-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 12px 12px 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-height: 64px;
}
.deployed-add-mode-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.deployed-add-mode-tab__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.deployed-add-mode-tab__hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}
.deployed-add-mode-tab:hover {
    border-color: color-mix(in srgb, var(--accent, #3b82f6) 45%, var(--border-color));
}
.deployed-add-mode-tab:has(input:checked) {
    border-color: var(--accent, #3b82f6);
    background: color-mix(in srgb, var(--accent, #3b82f6) 12%, var(--bg-secondary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
}
.deployed-add-mode-tab:has(input:checked) .deployed-add-mode-tab__title {
    color: var(--accent, #3b82f6);
}
.deployed-add-panel {
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.deployed-add-sub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-top: 4px;
}
.deployed-add-wild-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    white-space: nowrap;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
}
.deployed-add-preview {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    word-break: break-all;
}
.deployed-add-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.deployed-add-seg__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.deployed-add-seg__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.deployed-add-seg__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.deployed-add-seg__hint {
    font-size: 11px;
    color: var(--text-muted);
}
.deployed-add-seg__opt:hover {
    border-color: color-mix(in srgb, var(--accent, #3b82f6) 40%, var(--border-color));
}
.deployed-add-seg__opt:has(input:checked) {
    border-color: var(--accent, #3b82f6);
    background: color-mix(in srgb, var(--accent, #3b82f6) 10%, var(--bg-primary));
}
.deployed-add-seg__opt:has(input:checked) .deployed-add-seg__title {
    color: var(--accent, #3b82f6);
}
.deployed-add-warn {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 4px solid var(--warning);
    background: var(--bg-primary);
    font-size: 13px;
    line-height: 1.45;
}
.deployed-add-warn strong {
    display: block;
    margin-bottom: 6px;
    color: var(--warning);
}
.deployed-add-log {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    color: var(--text-muted);
}
@media (max-width: 720px) {
    .deployed-add-mode-tabs {
        grid-template-columns: 1fr 1fr;
    }
    .deployed-add-seg {
        grid-template-columns: 1fr;
    }
}

/* —— Responsive actions (Quick URL, payloads, credentials, Graph tokens) —— */
.quick-url-drawer-panel.quick-generator {
    display: flex;
    flex-direction: column;
}

#quickUrlSimpleGenerateRow,
#quickUrlAdvancedGenerateRow {
    flex-shrink: 0;
    margin-top: 12px;
    padding: 0;
}

#quickGeneratedUrlDisplay {
    flex-shrink: 0;
    min-width: 0;
}

#quickGeneratedUrlDisplay .form-input,
#quickGeneratedUrl {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .quick-url-drawer.quick-url-modal {
        width: calc(100vw - 12px);
        max-height: 94vh;
        border-radius: 12px;
    }

    .quick-url-drawer-body {
        padding-bottom: 12px;
    }
}

#payloadTabList .data-table {
    table-layout: fixed;
    width: 100%;
}

#payloadTabList .data-table td:nth-child(4) {
    min-width: 0;
    overflow: hidden;
}

#payloadTabList .data-table td:last-child {
    width: 9.5rem;
    white-space: nowrap;
    vertical-align: middle;
}

#payloadTabList .payload-landing-card {
    max-width: 100%;
}

@media (max-width: 960px) {
    #credentialsView .credentials-table {
        min-width: 0;
    }

    #credentialsView .credentials-table .cred-col-actions {
        min-width: 148px;
    }

    .graph-users-sessions-table .graph-users-col-actions {
        min-width: 0;
        width: auto;
    }

    .graph-users-sessions-table td.graph-session-actions-cell {
        white-space: normal;
    }

    .graph-users-sessions-table td.graph-session-actions-cell .btn {
        margin: 2px 4px 2px 0;
    }
}

.dashboard-inline-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.dashboard-inline-field-row .form-input,
.dashboard-inline-field-row input[readonly] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-inline-field-row .btn,
.dashboard-inline-field-row .btn-sm {
    flex-shrink: 0;
}

/* CRM Senders merged into Extra tools — deploy panel mounts under inner tab */
#extraToolsCrmSendersPanel #extraToolsCrmInnerTabs {
    margin-bottom: 4px;
}
#extraToolsCrmDeployMount > .view.extra-tools-crm-deploy-embedded {
    display: block !important;
    max-width: none;
    margin: 0;
}
#extraToolsCrmDeployMount > .view.extra-tools-crm-deploy-embedded > .feature-activation-gate-blur {
    display: block;
}
#extraToolsCrmDeployMount #crmSendersSubTabs {
    display: none !important;
}