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

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

/* ==================== Theme Variables ==================== */
:root,
[data-theme="dark"] {
    --bg-primary: #121418;
    /* Deep Midnight Ebony */
    --bg-secondary: #1b1b1b;
    /* Eerie Black */
    --bg-tertiary: #282c34;
    /* Ebony Pro */
    --bg-card: rgba(40, 44, 52, 0.85);
    /* Ebony Glass */
    --bg-card-hover: #282c34;
    --bg-input: #1b1b1b;
    /* Eerie Black Input */
    --text-primary: #f0f3f6;
    --text-secondary: #a8b2c1;
    --text-muted: #676767;
    /* Granite */
    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-glow: rgba(99, 102, 241, 0.25);
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.12);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.12);
    --danger-hover: #dc2626;
    --border: rgba(54, 69, 79, 0.45);
    /* Charcoal border */
    --border-hover: rgba(103, 103, 103, 0.6);
    /* Granite border */
    --glass-bg: rgba(27, 27, 27, 0.85);
    --glass-border: rgba(54, 69, 79, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --select-bg: #1b1b1b;
    --select-option-bg: #1b1b1b;
    --select-border: #36454f;
    /* Charcoal */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --qr-invert: invert(0);
    --scrollbar-track: #121418;
    --scrollbar-thumb: #36454f;
    --scrollbar-thumb-hover: #676767;
    --cursor-mirror: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1' dy='2' stdDeviation='2' flood-color='%23000000' flood-opacity='0.65'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(-12,-16) rotate(-135 50 50)' filter='url(%23s)'%3E%3Cpath d='M 21.5 10.5 C 19 10.5 17.2 12.8 17.8 15.3 C 20.6 24.8 17.8 33.6 10.5 41.2 C 9.2 42.6 10.2 45.8 12.2 45.8 L 62.5 45.8 C 64.8 45.8 66.7 47.7 66.7 50 C 66.7 52.3 64.8 54.2 62.5 54.2 L 12.2 54.2 C 10.2 54.2 9.2 57.4 10.5 58.8 C 17.8 66.4 20.6 75.2 17.8 84.7 C 17.2 87.2 19 89.5 21.5 89.5 C 23.2 89.5 24.7 88.5 25.6 87.1 L 87.5 53.6 C 89.6 52.3 90.4 49.6 89.2 47.3 C 88.8 46.3 88.2 45.5 87.5 45 L 25.6 12.9 C 24.7 11.5 23.2 10.5 21.5 10.5 Z' fill='%23DC2626' stroke='%23FFFFFF' stroke-width='5' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 2 2, pointer;
    --cursor-mirror-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='sa' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='1.5' flood-color='%23000000' flood-opacity='0.8'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(-12,-16) rotate(-135 50 50)' filter='url(%23sa)'%3E%3Cpath d='M 21.5 10.5 C 19 10.5 17.2 12.8 17.8 15.3 C 20.6 24.8 17.8 33.6 10.5 41.2 C 9.2 42.6 10.2 45.8 12.2 45.8 L 62.5 45.8 C 64.8 45.8 66.7 47.7 66.7 50 C 66.7 52.3 64.8 54.2 62.5 54.2 L 12.2 54.2 C 10.2 54.2 9.2 57.4 10.5 58.8 C 17.8 66.4 20.6 75.2 17.8 84.7 C 17.2 87.2 19 89.5 21.5 89.5 C 23.2 89.5 24.7 88.5 25.6 87.1 L 87.5 53.6 C 89.6 52.3 90.4 49.6 89.2 47.3 C 88.8 46.3 88.2 45.5 87.5 45 L 25.6 12.9 C 24.7 11.5 23.2 10.5 21.5 10.5 Z' fill='%23B91C1C' stroke='%23FFFFFF' stroke-width='5' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 2 2, pointer;
}

[data-theme="light"] {
    --bg-primary: #F6FDF8;
    /* Lightest Mint Paper (#F6FDF8) - Zero Glare */
    --bg-secondary: #ffffff;
    /* Pure Card Surface */
    --bg-tertiary: #D9F8E5;
    /* Lighter Mint (#D9F8E5) */
    --bg-card: #ffffff;
    --bg-card-hover: #F6FDF8;
    --bg-input: #EBFBF1;
    /* Soft Pale Mint */
    --text-primary: #1C3829;
    /* Deepest Evergreen Slate (#1C3829) */
    --text-secondary: #51775F;
    /* Darker Sage (#51775F) */
    --text-muted: #71A784;
    /* Dark Mint (#71A784) */
    --accent: #23864F;
    /* Natural Emerald */
    --accent-hover: #1b6d3f;
    --accent-glow: rgba(161, 238, 189, 0.4);
    /* Primary Mint Glow (#A1EEBD) */
    --success: #1e824c;
    --success-bg: #D9F8E5;
    --warning: #b45309;
    --warning-bg: rgba(180, 83, 9, 0.08);
    --danger: #b91c1c;
    --danger-bg: rgba(185, 28, 28, 0.08);
    --danger-hover: #991b1b;
    --border: #BDF3D1;
    /* Light Mint Border (#BDF3D1) */
    --border-hover: #A1EEBD;
    /* Primary Mint Border (#A1EEBD) */
    --glass-bg: rgba(246, 253, 248, 0.92);
    --glass-border: #BDF3D1;
    --shadow-sm: 0 1px 3px rgba(28, 56, 41, 0.06), 0 1px 2px rgba(28, 56, 41, 0.04);
    --shadow-md: 0 4px 16px rgba(28, 56, 41, 0.07);
    --shadow-lg: 0 10px 30px rgba(28, 56, 41, 0.09);
    --select-bg: #ffffff;
    --select-option-bg: #ffffff;
    --select-border: #BDF3D1;
    --qr-invert: invert(0);
    --scrollbar-track: #F6FDF8;
    --scrollbar-thumb: #A1EEBD;
    --scrollbar-thumb-hover: #71A784;
}

/* ==================== Universal Theme-Aware Scrollbar ==================== */
html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border: 2px solid transparent;
    background-clip: padding-box;
}

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

/* ==================== Base ==================== */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    min-height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    transition: background var(--transition), color var(--transition);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

/* ==================== Buttons ==================== */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition);
}

.icon-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.icon-btn span {
    font-weight: 600;
    font-size: 0.75rem;
}

.btn-sm-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary {
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-danger {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 12px var(--danger-bg);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-hover);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-outline:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--border-hover);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-sm:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

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

.btn-sm.btn-danger:hover:not(:disabled) {
    background: var(--danger-hover);
}

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

.btn-danger-outline {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.45);
    font-weight: 600;
}

.btn-danger-outline:hover:not(:disabled) {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-accent-outline {
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid rgba(99, 102, 241, 0.45);
    font-weight: 600;
}

[data-theme="dark"] .btn-accent-outline {
    color: #a5b4fc;
}

.btn-accent-outline:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-warning {
    background: #f59e0b;
    color: #111827;
    font-weight: 600;
}

.btn-warning:hover:not(:disabled) {
    background: #d97706;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.btn-warning-outline {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
    font-weight: 600;
}

.btn-warning-outline:hover:not(:disabled) {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #111827;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

/* ==================== Main Layout ==================== */
.app-layout-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px;
    gap: 0;
    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), gap 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.app-layout-container.drawer-open {
    max-width: 1440px;
    gap: 20px;
}

.app-layout-container.mirror-open {
    max-width: 1440px;
    gap: 20px;
}

.app-layout-container.drawer-open.mirror-open {
    max-width: 1860px;
    gap: 20px;
}

main {
    width: 100%;
    max-width: 960px;
    flex: 1 1 960px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), flex 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.app-layout-container.drawer-open main {
    max-width: 1440px;
    flex: 1 1 1440px;
}

.app-layout-container.mirror-open main {
    max-width: 1440px;
    flex: 1 1 1440px;
}

.app-layout-container.drawer-open.mirror-open main {
    max-width: 1860px;
    flex: 1 1 1860px;
}

#section-connect,
#section-system-markets,
#section-ios,
#section-logs,
#incoming-app-banner,
.alert-banner {
    max-width: 960px;
    width: 100%;
    align-self: flex-start;
    box-sizing: border-box;
    transition: margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-layout-container.mirror-open #section-connect,
.app-layout-container.mirror-open #section-system-markets,
.app-layout-container.mirror-open #section-ios,
.app-layout-container.mirror-open #section-logs,
.app-layout-container.mirror-open #incoming-app-banner,
.app-layout-container.mirror-open .alert-banner {
    margin-left: 400px;
}

/* ═══ Side-by-Side Apps Stage with Mirror Drawer & Play Store Drawer (Flush Aligned) ═══ */
.apps-drawer-stage {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    gap: 0;
    transition: gap 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.app-layout-container.drawer-open .apps-drawer-stage,
.app-layout-container.mirror-open .apps-drawer-stage {
    gap: 20px;
}

.apps-drawer-stage #section-apps {
    flex: 1 1 960px;
    max-width: 960px;
    min-width: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* ==================== Cards ==================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

#section-connect {
    position: relative;
    overflow: visible;
    z-index: 100;
}

#section-connect.is-collapsed {
    padding: 6px 12px;
    overflow: visible;
}

#section-connect.is-collapsed .conn-mode-tabs,
#section-connect.is-collapsed .connect-grid,
#section-connect.is-collapsed #connect-body,
#section-connect.is-collapsed #adb-connect-body,
#section-connect.is-collapsed #whylite-connect-body,
#section-connect.is-collapsed #ios-connect-body,
#section-connect.is-collapsed .connect-prefooter-bar,
#section-connect.is-collapsed .connect-details-footer {
    display: none !important;
}

.connect-prefooter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 2px;
    min-height: 28px;
    gap: 10px;
    flex-wrap: wrap;
}

.connect-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

@keyframes bridgePulseGlow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
    }
    50% {
        opacity: 0.72;
        box-shadow: 0 0 8px 1px rgba(251, 191, 36, 0.25);
    }
}

.bridge-update-pending-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 2px;
    animation: bridgePulseGlow 2.4s ease-in-out infinite;
}

.bridge-update-pending-banner.hidden {
    display: none !important;
}

.connect-details-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 16px;
    flex-wrap: wrap;
}

.inspiration-link {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.35px;
    transition: all var(--transition);
    opacity: 0.8;
}

.inspiration-link:hover {
    color: var(--primary, #6366f1);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.connect-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 1px 0;
    min-height: 40px;
    width: 100%;
    overflow: visible;
    flex-wrap: nowrap !important;
}

#section-connect:not(.is-collapsed) .connect-summary {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.summary-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    overflow: visible;
}

.connect-summary-logo {
    height: 36px;
    width: 36px;
    max-height: 36px;
    border-radius: 9px;
    margin-right: 0px;
    object-fit: contain;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.connect-summary-logo:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.5);
    border-color: rgba(220, 38, 38, 0.6);
}

.summary-device {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.summary-device strong {
    font-size: 0.86rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.summary-ip {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

.agent-live-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.45);
    border-radius: 4px;
    background: rgba(74, 222, 128, 0.12);
    letter-spacing: 0.5px;
    animation: agent-tag-blink 1.4s ease-in-out infinite;
    vertical-align: middle;
}

.agent-live-tag.lite-live-tag {
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.15);
    animation: none;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.35);
}

[data-theme="light"] .agent-live-tag.lite-live-tag {
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.45);
    background: rgba(2, 132, 199, 0.12);
}

@keyframes agent-tag-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 6px rgba(74, 222, 128, 0.45);
    }
    50% {
        opacity: 0.3;
        box-shadow: 0 0 0 transparent;
    }
}

.modal-chk-highlight-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e0f2fe;
    user-select: none;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1.5px solid #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    animation: chk-pulse-cyan 1.6s ease-in-out infinite;
    margin: 0 auto;
    transition: background 0.2s;
}

.modal-chk-highlight-box:hover {
    background: rgba(56, 189, 248, 0.16);
}

@keyframes chk-pulse-cyan {
    0%, 100% {
        border-color: rgba(56, 189, 248, 0.9);
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.45), inset 0 0 6px rgba(56, 189, 248, 0.12);
    }
    50% {
        border-color: rgba(56, 189, 248, 0.35);
        box-shadow: 0 0 3px rgba(56, 189, 248, 0.15), inset 0 0 0 transparent;
    }
}

.btn-confirm-dark-green {
    background: #047857 !important;
    color: #ffffff !important;
    border: 1px solid #065f46 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.35) !important;
}

.btn-confirm-dark-green:hover:not(:disabled) {
    background: #065f46 !important;
    transform: translateY(-1px);
}

.summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    min-width: 0;
}

.summary-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 7px;
    font-size: 0.74rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}


.btn-play-protect-nav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    line-height: 1.15;
}

.btn-play-protect-nav .btn-play-protect-text-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.btn-play-protect-nav .btn-play-protect-sub {
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.85;
    white-space: nowrap;
    line-height: 1;
    margin-top: 1px;
}

.summary-actions .icon-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    flex-shrink: 0;
}

.summary-actions .btn-sm {
    padding: 5px 9px;
    font-size: 0.76rem;
    white-space: nowrap;
}

.summary-actions .icon-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
}

.btn-toggle-panel {
    color: var(--text-muted);
}

.btn-toggle-panel:hover {
    color: var(--text-primary);
}

.connect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.qr-panel {
    text-align: center;
}

.qr-panel h2 {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

#qr-container {
    display: inline-block;
    padding: 16px;
    background: white;
    border-radius: var(--radius-md);
    margin: 16px 0;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition);
    border: 0;
    cursor: pointer;
}

#qr-container.hidden { display: none; }

#qr-container.qr-connect-mode {
    border: 2px solid #10b981;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.45);
    border-radius: var(--radius-md);
    animation: qr-connect-pulse 2s ease-in-out infinite;
}

@keyframes qr-connect-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.35); }
    50% { box-shadow: 0 0 28px rgba(16, 185, 129, 0.65); }
}

#qr-container:hover {
    transform: scale(1.03);
}

#qr-image {
    display: block;
    width: 236px;
    height: 236px;
    image-rendering: pixelated;
    filter: var(--qr-invert);
}
#qr-job-status.qr-ready-status { color: #34d399; font-weight: 700; margin: 0 auto 16px; font-variant-numeric: tabular-nums; }

.qr-panel .qr-primary-action,
.qr-panel .qr-secondary-action {
    display: block;
    width: min(100%, 320px);
    margin: 8px auto;
    font-weight: 700;
    padding: 10px 14px;
}

.qr-panel .qr-primary-action { background: var(--primary, #6366f1); color: white; }
.qr-panel .qr-secondary-action { border: 1px solid var(--primary, #6366f1); color: var(--text-primary); background: rgba(99, 102, 241, .12); }
.qr-confirm-actions { display: flex; gap: 8px; width: min(100%, 320px); margin: 8px auto; }
.qr-panel .qr-confirm-actions .qr-primary-action,
.qr-panel .qr-confirm-actions .qr-secondary-action { flex: 1; width: auto; min-width: 0; margin: 0; padding-inline: 8px; white-space: nowrap; }
#installed-test-job { margin-top: 22px; }
.qr-panel.manual-pairing #installed-test-job { width: max-content; max-width: 100%; background: var(--primary, #6366f1); color: #fff; margin: 12px auto; padding: 8px 14px; font-size: .82rem; }
.qr-panel #qr-job-status.manual-waiting { color: #fbbf24; font-weight: 700; margin: 12px auto 6px; animation: manual-wait-pulse 1.2s ease-in-out infinite; }
@keyframes manual-wait-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .qr-panel #qr-job-status.manual-waiting { animation: none; } }
.qr-panel.manual-pairing .qr-confirm-actions { width: max-content; max-width: 100%; margin: 20px auto 8px; }
.qr-panel.manual-pairing .qr-confirm-actions #qr-new-job { flex: 0 0 auto; background: rgba(99, 102, 241, .12); color: var(--text-secondary); border: 1px solid rgba(99, 102, 241, .5); padding: 8px 14px; font-size: .82rem; }
.qr-panel.manual-pairing .qr-confirm-actions #qr-replace-cancel { flex: 0 0 auto; padding: 8px 14px; font-size: .82rem; }
#installed-test-code { line-height: 1.8; margin: 12px auto; }
#installed-test-code-value { color: var(--primary, #818cf8); letter-spacing: .08em; font-size: 1.1rem; }
#installed-test-countdown { font-weight: 700; font-variant-numeric: tabular-nums; }
#qr-countdown, #pair-countdown { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 700; }
#qr-replace-warning { color: var(--warning, #fbbf24); font-size: .82rem; line-height: 1.5; max-width: 320px; margin: 6px auto; }
.mobile-page [hidden] { display: none !important; }
#qr-share-panel { margin: 12px auto; }
.bridge-registration { border-top: 1px solid rgba(255,255,255,.12); margin-top: 22px; padding-top: 18px; }
.bridge-registration p { margin: 8px 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }

.url-text {
    font-size: 0.8rem;
    color: var(--primary, #6366f1);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    padding: 7px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    word-break: break-all;
    max-width: 100%;
    box-sizing: border-box;
}

.url-text:hover,
.url-text:focus {
    color: #ffffff;
    background: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
    outline: none;
}

.url-text:active {
    transform: translateY(0) scale(0.98);
    opacity: 0.9;
}

/* ==================== ADB Guide Steps Box ==================== */
.adb-guide-box {
    font-size: 0.86rem;
    color: var(--text-secondary, #cbd5e1);
    font-family: inherit;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 10px);
    padding: 14px 16px;
    margin: 10px 0 16px 0;
    text-align: left;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-sizing: border-box;
}

.adb-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.adb-guide-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light, #818cf8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.adb-guide-step .step-text {
    flex: 1;
    word-break: normal;
}

.adb-guide-step .step-text b {
    color: var(--text-primary, #ffffff);
}

[data-theme="light"] .adb-guide-box {
    background: #EBFBF1;
    border: 1px solid #BDF3D1;
    color: #2D4A37;
    box-shadow: inset 0 1px 2px rgba(28, 56, 41, 0.03);
}

[data-theme="light"] .adb-guide-step .step-num {
    background: #D9F8E5;
    color: #1C3829;
    border: 1px solid #A1EEBD;
}

[data-theme="light"] .adb-guide-step .step-text b {
    color: #1C3829;
}

.connect-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.connect-panel h2 {
    margin-bottom: 20px;
}

/* ==================== Status Indicator ==================== */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    margin-bottom: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

[data-theme="light"] .status-indicator {
    background: #EBFBF1;
    border-color: #BDF3D1;
    color: #1C3829;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.disconnected {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger-bg);
}

.status-dot.connected {
    background: var(--success);
    box-shadow: 0 0 8px var(--success-bg);
    animation: pulse-green 2s infinite;
}

.status-dot.connecting {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning-bg);
    animation: pulse-yellow 1s infinite;
}

@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
    }

    50% {
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    }
}

@keyframes pulse-yellow {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
    }

    50% {
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
    }
}

/* ==================== Form ==================== */
.input-group {
    margin-bottom: 14px;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.label-row label {
    margin-bottom: 0 !important;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    gap: 4px;
}

#scan-icon,
#adb-scan-icon,
#ios-scan-icon {
    display: inline-block;
    transform-origin: center center;
    vertical-align: middle;
}

.btn-xs.scanning #scan-icon {
    animation: scan-blink 0.65s infinite ease-in-out;
}

@keyframes scan-blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.25;
        transform: scale(1.15);
    }
}

.select-input {
    width: 100%;
    padding: 10px 38px 10px 14px;
    background-color: var(--select-bg);
    border: 1px solid var(--select-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.select-input:hover {
    border-color: var(--accent);
}

.select-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.select-input optgroup,
.select-input option {
    background-color: var(--select-option-bg);
    color: var(--text-primary);
    padding: 8px 12px;
}

.select-input optgroup {
    font-weight: 700;
    color: var(--accent);
}

.input-row {
    display: flex;
    gap: 12px;
}

/* ==================== Composite IP Input ==================== */
.ip-composite-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--select-bg);
    border: 1px solid var(--select-border);
    border-radius: var(--radius-sm);
    padding: 0;
    transition: all var(--transition);
    cursor: text;
    overflow: hidden;
}

.ip-composite-wrapper:hover {
    border-color: var(--accent);
}

.ip-composite-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.ip-prefix-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 2px 9px 12px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    background: transparent;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.input-ip-last {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 9px 12px 9px 2px !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 45px;
    letter-spacing: 0.5px;
}

.input-ip-last::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.input-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: all var(--transition);
    outline: none;
}

.input-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.input-group input::placeholder {
    color: var(--text-muted);
}

.connect-actions-row {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.connect-actions-row .btn {
    flex: 1;
    min-width: 0;
}

.inline-confirm-box {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--danger-bg);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: var(--radius-md);
    animation: fadeInSlideDown 0.25s ease-out;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}

.inline-confirm-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.inline-confirm-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.inline-confirm-text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.inline-confirm-text p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.35;
}

.inline-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.device-info {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--success-bg);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--success);
    font-weight: 500;
}

/* ==================== App List Section ==================== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.section-header h2 {
    margin-bottom: 0;
    white-space: nowrap;
}

.section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
}

.section-actions .btn-sm {
    padding: 6px 10px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==================== Toolbar Action Buttons (Matching Filter & Gridview) ==================== */
#btn-advance-mode,
#btn-bloatware-filter,
#btn-watchdog-scan {
    height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    box-sizing: border-box;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

#btn-advance-mode:hover:not(:disabled),
#btn-bloatware-filter:hover:not(:disabled),
#btn-watchdog-scan:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

#btn-advance-mode:active:not(:disabled),
#btn-bloatware-filter:active:not(:disabled),
#btn-watchdog-scan:active:not(:disabled) {
    transform: translateY(1px);
}

#btn-bloatware-filter.active {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

#btn-bloatware-filter.active svg {
    color: #fbbf24;
}

.market-badge.bloat-badge {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

#btn-advance-mode .advance-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ==================== View Mode Switcher ==================== */
.view-mode-group {
    display: inline-flex;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
    align-items: center;
    height: 34px;
    box-sizing: border-box;
}

.btn-icon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-icon-toggle:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.btn-icon-toggle.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.search-box {
    width: 100%;
    margin-bottom: 16px;
}

.search-box input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    transition: all var(--transition);
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.search-box input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ==================== App List Zoom / Density Controller ==================== */
.section-header-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.app-zoom-controller {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 3px;
    gap: 1px;
    user-select: none;
    box-sizing: border-box;
    transition: all var(--transition);
}

.app-zoom-controller:hover {
    border-color: var(--border-hover);
}

[data-theme="light"] .app-zoom-controller {
    background: #EBFBF1;
    border-color: #BDF3D1;
}

.zoom-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.zoom-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

[data-theme="light"] .zoom-btn:hover:not(:disabled) {
    background: rgba(28, 56, 41, 0.08);
    color: var(--text-primary);
}

.zoom-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.zoom-level-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0 4px;
    height: 22px;
    line-height: 22px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    min-width: 36px;
    text-align: center;
}

.zoom-level-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent);
}

[data-theme="light"] .zoom-level-btn:hover {
    background: rgba(28, 56, 41, 0.06);
    color: var(--accent);
}

/* ==================== App List Density Levels (80%, 100%, 120%, 140%, 160%, 180%, 200%) ==================== */
/* 80% - Ultra Compact */
body #app-list.density-80 .app-item {
    padding: 3px 8px !important;
    gap: 6px !important;
}
body #app-list.density-80 .app-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
}
body #app-list.density-80 .app-name {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
}
body #app-list.density-80 .app-package {
    font-size: 0.64rem !important;
    line-height: 1.15 !important;
}
body #app-list.density-80 .app-actions .btn {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
    height: 24px !important;
}
body #app-list.density-80 .btn-select-trash,
body #app-list.density-80 .btn-select-virus {
    width: 24px !important;
    height: 24px !important;
}
body #app-list.density-80 .btn-select-trash svg,
body #app-list.density-80 .btn-select-virus svg {
    width: 12px !important;
    height: 12px !important;
}

/* 100% - Normal Default */
body #app-list.density-100 .app-item {
    padding: 7px 12px !important;
    gap: 10px !important;
}
body #app-list.density-100 .app-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
}
body #app-list.density-100 .app-name {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
}
body #app-list.density-100 .app-package {
    font-size: 0.71rem !important;
    line-height: 1.2 !important;
}
body #app-list.density-100 .app-actions .btn {
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
    height: 28px !important;
}
body #app-list.density-100 .btn-select-trash,
body #app-list.density-100 .btn-select-virus {
    width: 28px !important;
    height: 28px !important;
}
body #app-list.density-100 .btn-select-trash svg,
body #app-list.density-100 .btn-select-virus svg {
    width: 14px !important;
    height: 14px !important;
}

/* 120% - Medium Large */
body #app-list.density-120 .app-item {
    padding: 10px 14px !important;
    gap: 12px !important;
}
body #app-list.density-120 .app-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 7px !important;
}
body #app-list.density-120 .app-name {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
}
body #app-list.density-120 .app-package {
    font-size: 0.76rem !important;
}
body #app-list.density-120 .app-actions .btn {
    padding: 4px 10px !important;
    font-size: 0.76rem !important;
    height: 31px !important;
}
body #app-list.density-120 .btn-select-trash,
body #app-list.density-120 .btn-select-virus {
    width: 31px !important;
    height: 31px !important;
}
body #app-list.density-120 .btn-select-trash svg,
body #app-list.density-120 .btn-select-virus svg {
    width: 15px !important;
    height: 15px !important;
}

/* 140% - Large */
body #app-list.density-140 .app-item {
    padding: 13px 16px !important;
    gap: 14px !important;
}
body #app-list.density-140 .app-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
}
body #app-list.density-140 .app-name {
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
}
body #app-list.density-140 .app-package {
    font-size: 0.81rem !important;
}
body #app-list.density-140 .app-actions .btn {
    padding: 5px 12px !important;
    font-size: 0.80rem !important;
    height: 34px !important;
}
body #app-list.density-140 .btn-select-trash,
body #app-list.density-140 .btn-select-virus {
    width: 34px !important;
    height: 34px !important;
}
body #app-list.density-140 .btn-select-trash svg,
body #app-list.density-140 .btn-select-virus svg {
    width: 16px !important;
    height: 16px !important;
}

/* 160% - Extra Large */
body #app-list.density-160 .app-item {
    padding: 16px 18px !important;
    gap: 16px !important;
}
body #app-list.density-160 .app-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
}
body #app-list.density-160 .app-name {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
}
body #app-list.density-160 .app-package {
    font-size: 0.86rem !important;
}
body #app-list.density-160 .app-actions .btn {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    height: 38px !important;
}
body #app-list.density-160 .btn-select-trash,
body #app-list.density-160 .btn-select-virus {
    width: 38px !important;
    height: 38px !important;
}
body #app-list.density-160 .btn-select-trash svg,
body #app-list.density-160 .btn-select-virus svg {
    width: 18px !important;
    height: 18px !important;
}

/* 180% - Huge */
body #app-list.density-180 .app-item {
    padding: 19px 20px !important;
    gap: 18px !important;
}
body #app-list.density-180 .app-icon {
    width: 55px !important;
    height: 55px !important;
    border-radius: 12px !important;
}
body #app-list.density-180 .app-name {
    font-size: 1.14rem !important;
    line-height: 1.35 !important;
}
body #app-list.density-180 .app-package {
    font-size: 0.92rem !important;
}
body #app-list.density-180 .app-actions .btn {
    padding: 7px 16px !important;
    font-size: 0.90rem !important;
    height: 42px !important;
}
body #app-list.density-180 .btn-select-trash,
body #app-list.density-180 .btn-select-virus {
    width: 42px !important;
    height: 42px !important;
}
body #app-list.density-180 .btn-select-trash svg,
body #app-list.density-180 .btn-select-virus svg {
    width: 20px !important;
    height: 20px !important;
}

/* 200% - Maximum (2x) */
body #app-list.density-200 .app-item {
    padding: 22px 22px !important;
    gap: 20px !important;
}
body #app-list.density-200 .app-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
}
body #app-list.density-200 .app-name {
    font-size: 1.24rem !important;
    line-height: 1.35 !important;
}
body #app-list.density-200 .app-package {
    font-size: 0.98rem !important;
}
body #app-list.density-200 .app-actions .btn {
    padding: 8px 18px !important;
    font-size: 0.96rem !important;
    height: 46px !important;
}
body #app-list.density-200 .btn-select-trash,
body #app-list.density-200 .btn-select-virus {
    width: 46px !important;
    height: 46px !important;
}
body #app-list.density-200 .btn-select-trash svg,
body #app-list.density-200 .btn-select-virus svg {
    width: 22px !important;
    height: 22px !important;
}

/* Grid View Density Scaling */
body #app-list.density-80.view-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
body #app-list.density-80.view-grid .app-item {
    padding: 8px 6px !important;
    gap: 5px !important;
}
body #app-list.density-80.view-grid .app-icon {
    width: 32px !important;
    height: 32px !important;
}
body #app-list.density-80.view-grid .app-name {
    font-size: 0.74rem !important;
}
body #app-list.density-80.view-grid .app-package {
    font-size: 0.62rem !important;
}

body #app-list.density-100.view-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
body #app-list.density-100.view-grid .app-item {
    padding: 14px 10px !important;
    gap: 8px !important;
}
body #app-list.density-100.view-grid .app-icon {
    width: 44px !important;
    height: 44px !important;
}

body #app-list.density-120.view-grid,
body #app-list.density-140.view-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
body #app-list.density-120.view-grid .app-item,
body #app-list.density-140.view-grid .app-item {
    padding: 16px 12px !important;
    gap: 10px !important;
}
body #app-list.density-120.view-grid .app-icon {
    width: 52px !important;
    height: 52px !important;
}
body #app-list.density-140.view-grid .app-icon {
    width: 58px !important;
    height: 58px !important;
}

body #app-list.density-160.view-grid,
body #app-list.density-180.view-grid,
body #app-list.density-200.view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}
body #app-list.density-160.view-grid .app-item,
body #app-list.density-180.view-grid .app-item,
body #app-list.density-200.view-grid .app-item {
    padding: 20px 16px !important;
    gap: 12px !important;
}
body #app-list.density-160.view-grid .app-icon {
    width: 64px !important;
    height: 64px !important;
}
body #app-list.density-180.view-grid .app-icon {
    width: 72px !important;
    height: 72px !important;
}
body #app-list.density-200.view-grid .app-icon {
    width: 80px !important;
    height: 80px !important;
}

/* ==================== App List ==================== */
.app-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: auto;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 4px;
}

@media (min-height: 950px) {
    .app-list {
        max-height: calc(100vh - 310px);
    }
}

/* ══════════════ View Mode: Grid (ตารางการ์ด) ══════════════ */
.app-list.view-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .app-list.view-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-list.view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .app-list.view-grid {
        grid-template-columns: 1fr;
    }
}

.app-list.view-grid .app-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    gap: 8px;
    position: relative;
    border: 1px solid var(--border);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    height: 100%;
    box-sizing: border-box;
}

.app-list.view-grid .app-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.app-list.view-grid .app-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
}

.app-list.view-grid .app-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-top: 2px;
}

.app-list.view-grid .app-info {
    width: 100%;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.app-list.view-grid .app-name {
    font-size: 0.84rem;
    font-weight: 600;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    text-align: center;
}

.app-list.view-grid .app-package {
    font-size: 0.68rem;
    max-width: 100%;
    opacity: 0.8;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
    text-align: center;
}

/* ══════════════ View Mode: Compact (กะทัดรัด/แน่น) ══════════════ */
.app-list.view-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-list.view-compact .app-item {
    padding: 5px 10px;
    gap: 8px;
}

.app-list.view-compact .app-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}

.app-list.view-compact .app-info {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.app-list.view-compact .app-name {
    font-size: 0.82rem;
    font-weight: 500;
    flex: 1;
}

.app-list.view-compact .app-package {
    font-size: 0.7rem;
    max-width: 280px;
}

.app-list::-webkit-scrollbar {
    width: 6px;
}

.app-list::-webkit-scrollbar-track {
    background: transparent;
}

.app-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.app-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid transparent;
    transition: all var(--transition);
    cursor: pointer;
}

.app-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border);
}

.app-item.item-system-market {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.app-item.item-system-market:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    border-left-color: #f59e0b;
}

.market-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
    margin-left: 6px;
    vertical-align: middle;
}

[data-theme="light"] .market-badge {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.35);
}

.disabled-status-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── Watchdog Telemetry Badges ─── */
.watchdog-badges-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
    flex-wrap: wrap;
}

.badge-watchdog {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.3;
    white-space: nowrap;
    user-select: none;
    transition: all 0.15s ease;
}

/* 🟢 Live */
.badge-wd-live {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .badge-wd-live {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    border-color: rgba(5, 150, 105, 0.35);
}

/* ⏰ Alarm */
.badge-wd-alarm {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

[data-theme="light"] .badge-wd-alarm {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.35);
}

/* ⚙️ Job */
.badge-wd-job {
    background: rgba(59, 130, 246, 0.18);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.45);
}

[data-theme="light"] .badge-wd-job {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.35);
}

/* ⚡ No-Doze / Whitelist */
.badge-wd-whitelist {
    background: rgba(217, 70, 239, 0.18);
    color: #d946ef;
    border: 1px solid rgba(217, 70, 239, 0.45);
}

[data-theme="light"] .badge-wd-whitelist {
    background: rgba(192, 38, 211, 0.12);
    color: #c026d3;
    border-color: rgba(192, 38, 211, 0.35);
}

/* 💤 Stopped */
.badge-wd-stopped {
    background: rgba(107, 114, 128, 0.16);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.35);
}

[data-theme="light"] .badge-wd-stopped {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.25);
}

/* 🪟 Overlay / วาดทับจอ */
.badge-wd-overlay {
    background: rgba(244, 63, 94, 0.18);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.45);
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.2);
}

[data-theme="light"] .badge-wd-overlay {
    background: rgba(225, 29, 72, 0.12);
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.35);
}

/* Watchdog Scan Button Active State */
#btn-watchdog-scan.is-scanning {
    pointer-events: none;
    opacity: 0.8;
}

/* ═══ Live Ad Hunter Telemetry Badges & Highlights ═══ */
.badge-wd-ad-virus {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.55) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
    animation: ad-badge-pulse 1.2s infinite alternate !important;
}

@keyframes ad-badge-pulse {
    0% {
        transform: scale(0.97);
        filter: brightness(1);
    }

    100% {
        transform: scale(1.05);
        filter: brightness(1.25);
    }
}

.badge-wd-screen {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
}

.app-item.item-live-ad-active {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.4), 0 4px 18px rgba(239, 68, 68, 0.25) !important;
    animation: ad-row-pulse 1.8s infinite ease-in-out !important;
}

@keyframes ad-row-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.4), 0 4px 18px rgba(239, 68, 68, 0.25);
    }

    50% {
        box-shadow: 0 0 0 2.5px rgba(239, 68, 68, 0.8), 0 6px 24px rgba(239, 68, 68, 0.45);
    }
}

.app-item.item-live-foreground-active {
    border-color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
    box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.35) !important;
}



/* ═══ Ad Hunter Floating Indicator Arrows (Up / Down) ═══ */
.app-list-wrapper {
    position: relative;
    width: 100%;
}

/* ═══ ADB Agent Installation Prompt Overlay (App List Backdrop Blur) ═══ */
.adb-agent-install-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 17, 23, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.adb-agent-install-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.adb-agent-install-card {
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    padding: 24px 22px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: adbCardPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes adbCardPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.adb-agent-install-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    position: relative;
}

.adb-agent-install-icon-wrap.pulse-glow {
    animation: adbInstallPulse 2s infinite ease-in-out;
}

.adb-agent-install-icon-wrap.is-success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
    animation: none;
}

.adb-agent-install-icon-wrap.is-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    animation: none;
}

@keyframes adbInstallPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(56, 189, 248, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    }
}

.adb-agent-install-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #f0f6fc);
    margin: 0;
}

.adb-agent-install-subtitle {
    font-size: 12px;
    color: var(--text-muted, #8b949e);
    margin: 4px 0 0 0;
}

.adb-agent-install-action-box {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.adb-install-brand-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 10px;
    border-radius: 12px;
}

.adb-install-key-action {
    font-size: 16px;
    font-weight: 700;
    color: #facc15;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
    text-align: center;
}

.adb-install-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #c9d1d9;
    text-align: center;
}

.adb-agent-install-status-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8b949e;
}

.ad-hunter-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.94), rgba(185, 28, 28, 0.94));
    color: #ffffff;
    border: 1px solid rgba(254, 202, 202, 0.65);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.ad-hunter-arrow:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    transform: translateX(-50%) scale(1.06);
    box-shadow: 0 6px 24px rgba(220, 38, 38, 0.7);
}

.ad-hunter-arrow-up {
    top: 8px;
    animation: ad-arrow-bounce-up 0.9s infinite alternate ease-in-out;
}

.ad-hunter-arrow-down {
    bottom: 8px;
    animation: ad-arrow-bounce-down 0.9s infinite alternate ease-in-out;
}

@keyframes ad-arrow-bounce-up {
    0% {
        transform: translateX(-50%) translateY(0);
        filter: brightness(1);
    }

    100% {
        transform: translateX(-50%) translateY(-5px);
        filter: brightness(1.2);
    }
}

@keyframes ad-arrow-bounce-down {
    0% {
        transform: translateX(-50%) translateY(0);
        filter: brightness(1);
    }

    100% {
        transform: translateX(-50%) translateY(5px);
        filter: brightness(1.2);
    }
}

/* ═══ Live Ad Hunter Bar (Inside Screen Mirror Drawer) ═══ */
.mirror-ad-hunter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    transition: all 0.25s ease;
}

.mirror-ad-hunter-bar.ad-alert {
    background: rgba(239, 68, 68, 0.16) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.45) !important;
    box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.2);
}

.hunter-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.hunter-pulse-icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

.mirror-ad-hunter-bar.ad-alert .hunter-pulse-icon {
    animation: pulse-danger 1s infinite alternate;
}

@keyframes pulse-danger {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px #ef4444);
    }

    100% {
        transform: scale(1.25);
        filter: drop-shadow(0 0 8px #ef4444);
    }
}

.hunter-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.hunter-meta:hover .hunter-app-title {
    color: #38bdf8 !important;
    text-decoration: underline;
}

.hunter-meta:hover .hunter-pkg-subtitle {
    color: #cbd5e1;
}

.item-row-pulse-highlight {
    outline: 2px solid #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.7) !important;
    transition: all 0.3s ease;
}

.hunter-status-badge-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-hunter {
    font-size: 0.68rem;
    padding: 1px 6px;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 4px;
    font-weight: 600;
}

.badge-ad-sdk {
    font-size: 0.68rem;
    padding: 1px 6px;
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.hunter-app-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hunter-pkg-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hunter-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.app-item.item-disabled {
    opacity: 0.65;
    background: rgba(0, 0, 0, 0.15);
}

.btn-success-outline {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.45);
    font-weight: 600;
}

.btn-success-outline:hover:not(:disabled) {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.app-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-app-info {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-weight: 600;
}

.btn-app-info:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.25);
    color: var(--text-primary);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.app-list.view-grid .app-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: auto;
    padding-top: 6px;
    box-sizing: border-box;
}

.app-list.view-grid .app-actions .btn {
    width: 100%;
    padding: 3px 4px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
    box-sizing: border-box;
}

.app-list.view-grid .app-actions .btn svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    margin-right: 2px !important;
}

.app-list.view-grid .app-actions .btn:only-child {
    grid-column: 1 / -1;
}


/* Floating Toast Disabled */
.toast-container,
#toast-container {
    display: none !important;
}

.toast {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: white;
    background: #1e1e2d;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    animation: toastIn 0.25s ease-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.toast-success {
    background: #14532d;
    border-color: #22c55e;
    color: #bbf7d0;
}

.toast.toast-error {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #fecaca;
}

.toast.toast-warning {
    background: #78350f;
    border-color: #f59e0b;
    color: #fef3c7;
}

.toast.toast-info {
    background: #1e293b;
    border-color: #38bdf8;
    color: #e0f2fe;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.toast.toast-out {
    opacity: 0;
    transform: translateY(12px);
}

.app-item.fade-out {
    opacity: 0;
    transform: translateX(40px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.35s ease;
}

/* Custom Checkbox */
.app-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.app-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.app-row-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    flex-shrink: 0;
    padding: 3px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 8px);
}

.app-row-selector.selector-single {
    min-width: unset;
    width: auto;
}

.btn-select-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    position: relative;
}

.btn-select-trash {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.btn-select-trash:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.65);
    color: #ffffff;
    transform: scale(1.08);
}

.btn-select-trash.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #fca5a5;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transform: scale(1.08);
}

.btn-select-skull {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.35);
    color: #c084fc;
}

.btn-select-skull:hover {
    background: rgba(168, 85, 247, 0.22);
    border-color: rgba(168, 85, 247, 0.65);
    color: #ffffff;
    transform: scale(1.08);
}

.btn-select-skull.active {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    border-color: #e9d5ff;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transform: scale(1.08);
}

.btn-select-action svg {
    width: 17px;
    height: 17px;
    display: block;
    transition: transform 0.2s ease;
}

.btn-select-action:active svg {
    transform: scale(0.9);
}

.app-item.item-selected-trash {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.45);
}

.app-item.item-selected-virus {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.55);
}

[data-theme="light"] .app-row-selector {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-select-trash {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

[data-theme="light"] .btn-select-skull {
    background: rgba(168, 85, 247, 0.06);
    border-color: rgba(168, 85, 247, 0.25);
    color: #7e22ce;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-hover);
    border-radius: 5px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-checkbox input:checked~.checkmark {
    background: var(--accent);
    border-color: var(--accent);
}

.app-checkbox input:checked~.checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 700;
}

.app-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-input);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.app-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-corner-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0d1117;
    border: 1px solid rgba(245, 158, 11, 0.6);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    cursor: help;
    z-index: 2;
}

.icon-corner-badge svg {
    width: 8px;
    height: 8px;
    display: block;
}

[data-theme="light"] .icon-corner-badge {
    background: #ffffff;
    border-color: #d97706;
    color: #d97706;
}

/* #region Lite unverified icon placeholder */
.lite-ring-placeholder.app-icon,
.lite-ring-placeholder.uninstall-review-app-icon,
.lite-ring-placeholder.log-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--success);
}

.lite-ring-orbit {
    position: relative;
    width: 78%;
    height: 78%;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-bottom-color: currentColor;
    border-radius: 50%;
    animation: lite-ring-spin 2.8s linear infinite;
}

.lite-ring-orbit::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1.8px solid transparent;
    border-left-color: currentColor;
    border-right-color: currentColor;
    border-radius: 50%;
    opacity: 0.55;
    animation: lite-ring-spin 1.6s linear infinite reverse;
}

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

@media (prefers-reduced-motion: reduce) {
    .lite-ring-orbit,
    .lite-ring-orbit::after { animation: none; }
}
/* #endregion */

.app-icon.icon-morphing {
    opacity: 0.5;
    transform: scale(0.92);
}

.app-icon.icon-morphed {
    opacity: 1;
    transform: scale(1);
}

.app-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-package {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-status {
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.section-footer .btn {
    min-width: 155px;
    height: 48px;
    padding: 10px 18px;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all var(--transition, 0.2s ease);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .section-footer {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .section-footer .btn {
        width: 100%;
        min-width: unset;
    }
}

.btn-send-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.btn-trash-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.section-footer .btn:hover:not(:disabled) .btn-send-icon {
    transform: translateX(4px) scale(1.1);
}

.section-footer .btn:hover:not(:disabled) .btn-trash-icon {
    transform: rotate(-12deg) scale(1.15);
}

/* ==================== Progress ==================== */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 16px;
}

.progress-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 4px;
}

.app-item.item-focus-target {
    outline: 1px solid rgba(56, 189, 248, 0.65);
    outline-offset: -1px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

.progress-item.status-waiting {
    border-left-color: var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.22);
    transform: scale(1.01);
}

.progress-item.status-uninstalled {
    border-left-color: var(--success);
    background: var(--success-bg);
    opacity: 0.85;
}

.progress-item.status-disabled_fallback {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    opacity: 0.9;
}

.progress-item.status-cancelled,
.progress-item.status-skipped {
    border-left-color: var(--text-muted);
    opacity: 0.55;
}

.app-icon-sm {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.progress-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-package {
    flex: 1;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.progress-item-actions {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    flex-shrink: 0;
}

.progress-item.status-waiting .progress-item-actions {
    display: inline-flex;
}

.progress-item.status-waiting .progress-status {
    display: inline-flex;
    align-items: center;
    color: var(--gold, #eab308);
}

.phone-confirmation-guide {
    text-align: center;
    padding: 14px 16px;
    border: 1px solid rgba(234, 179, 8, 0.45);
    border-radius: var(--radius-sm);
    background: rgba(234, 179, 8, 0.08);
    color: var(--text-primary);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.phone-confirmation-title {
    display: block;
    font-size: 1.05rem;
    color: var(--gold, #eab308);
}

.phone-confirmation-reminder {
    display: block;
    margin-top: 8px;
    color: var(--gold, #eab308);
}
#phone-confirmation-action { font-weight: 600; }
#phone-confirmation-app { color: var(--success, #10b981); }
.phone-confirmation-confirm { color: var(--danger, #ef4444); }

.progress-item.awaiting-phone {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 4px 10px;
}
.progress-item.awaiting-phone .app-icon-sm { grid-row: 1 / 3; }
.progress-item.awaiting-phone .progress-name { white-space: normal; overflow-wrap: anywhere; }
.progress-item.awaiting-phone .progress-package { display: none; }
.progress-item.awaiting-phone .progress-status {
    grid-column: 2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-left: 0;
}
.progress-item.awaiting-phone .progress-item-actions { grid-column: 3; grid-row: 1 / 3; }

.phone-confirmation-guide.confirmation-overdue,
.progress-item.phone-confirmation-overdue {
    animation: phone-confirm-attention 0.6s ease-in-out infinite;
}
@keyframes phone-confirm-attention {
    0%, 100% { border-color: rgba(234, 179, 8, 0.45); background-color: rgba(234, 179, 8, 0.08); }
    50% { border-color: #eab308; background-color: rgba(234, 179, 8, 0.24); }
}
@media (prefers-reduced-motion: reduce) {
    .phone-confirmation-guide.confirmation-overdue,
    .progress-item.phone-confirmation-overdue { animation: none; border-color: #eab308; }
}

.btn-progress-action {
    padding: 3px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
}

/* ==================== Modal ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.modal-overlay.visible .modal {
    transform: scale(1);
}

.modal h3 {
    font-size: 1rem;
    color: var(--warning);
    margin-bottom: 12px;
}

.modal-app-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.modal-package {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-actions .btn {
    min-width: 100px;
}

/* ==================== Toast ==================== */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2000;
    pointer-events: none;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: white;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    max-width: 360px;
    box-shadow: var(--shadow-md);
}

.toast.visible {
    transform: translateX(0);
}

.toast-success {
    background: var(--success);
}

.toast-error {
    background: var(--danger);
}

.toast-warning {
    background: var(--warning);
    color: #18181b;
}

.toast-info {
    background: var(--accent);
}

/* ==================== Empty State ==================== */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==================== Hidden ==================== */
.hidden {
    display: none !important;
}

/* ==================== Mobile Page ==================== */
.mobile-page {
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    box-sizing: border-box;
    margin: 0;
}

.mobile-container {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

.mobile-hero {
    margin-bottom: 28px;
}

.logo-glow {
    font-size: 3.5rem;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px var(--accent-glow));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.mobile-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-hero .subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Download Button */
.download-btn,
.btn-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    color: #ffffff !important;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 8px 24px var(--accent-glow);
    transition: all var(--transition);
    margin-bottom: 28px;
}

.download-btn svg,
.btn-download svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.download-btn:hover,
.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px var(--accent-glow);
}

.download-btn:active,
.btn-download:active {
    transform: translateY(0);
}

.download-icon {
    font-size: 1.4rem;
    width: 28px;
    height: 28px;
}

.download-arrow {
    font-size: 1.3rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.download-btn:hover .download-arrow,
.btn-download:hover .download-arrow {
    transform: translateX(4px);
}

.mobile-version-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(34, 197, 94, 0.25);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Steps */
.steps-container {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-sizing: border-box;
}

.steps-container h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}

.step {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}

.step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-body h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.step-body p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.mobile-footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    .app-layout-container {
        padding: 12px 10px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        justify-content: center;
        box-sizing: border-box;
    }

    main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    header {
        padding: 12px 16px;
    }

    .connect-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .qr-panel {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #qr-container {
        margin: 12px auto;
        display: inline-flex;
        justify-content: center;
    }

    .card {
        padding: 16px 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: var(--radius-md);
    }

    .connect-summary {
        flex-wrap: wrap;
        gap: 8px;
    }

    .summary-info {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .summary-actions {
        width: 100%;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .section-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: space-between;
    }

    .app-item {
        padding: 9px 10px;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .app-info {
        min-width: 0;
        flex: 1;
    }

    .app-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.84rem;
    }

    .app-package {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.68rem;
    }

    .app-actions {
        gap: 4px;
        flex-shrink: 0;
    }

    .app-actions .btn {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    #toast-container {
        bottom: 12px;
        right: 12px;
        left: 12px;
    }

    .toast {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .app-layout-container {
        padding: 8px 6px;
    }

    .card {
        padding: 14px 10px;
    }

    .mobile-page {
        padding: 20px 12px;
    }

    .mobile-container {
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    .download-btn {
        padding: 14px 16px;
        font-size: 0.98rem;
    }

    .steps-container {
        padding: 16px 12px;
    }
}

/* ==================== Animations ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.card {
    animation: fadeIn 0.4s ease-out;
}

.app-item {
    animation: none;
}

/* ==================== Real-Time Incoming App Alert Banner ==================== */
.alert-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    align-self: flex-start;
    transition: all 0.3s ease, margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: fadeIn 0.3s ease;
}

/* 1. Virus Match: กรอบสีแดง (Red Border / Virus Alert) */
.alert-banner.alert-banner-virus {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(15, 23, 42, 0.95));
    border: 2px solid #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.45);
    animation: alert-pulse-virus 2s infinite ease-in-out, fadeIn 0.3s ease;
}

.alert-banner.alert-banner-virus .alert-content strong {
    color: #fca5a5;
}

@keyframes alert-pulse-virus {

    0%,
    100% {
        border-color: #ef4444;
        box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
    }

    50% {
        border-color: #f87171;
        box-shadow: 0 0 28px rgba(239, 68, 68, 0.65);
    }
}

/* 2. Safe Match: กรอบสีเขียว (Green Border) */
.alert-banner.alert-banner-safe {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(15, 23, 42, 0.9));
    border: 2px solid #22c55e;
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.3);
    animation: alert-pulse-safe 2s infinite ease-in-out, fadeIn 0.3s ease;
}

.alert-banner.alert-banner-safe .alert-content strong {
    color: #4ade80;
}

@keyframes alert-pulse-safe {

    0%,
    100% {
        border-color: #22c55e;
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
    }

    50% {
        border-color: #4ade80;
        box-shadow: 0 0 26px rgba(34, 197, 94, 0.5);
    }
}

/* 3. Unknown Match: กรอบสีเหลือง (Yellow Border) */
.alert-banner.alert-banner-unknown {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(15, 23, 42, 0.9));
    border: 2px solid #eab308;
    box-shadow: 0 0 22px rgba(234, 179, 8, 0.3);
    animation: alert-pulse-unknown 2s infinite ease-in-out, fadeIn 0.3s ease;
}

.alert-banner.alert-banner-unknown .alert-content strong {
    color: #fde047;
}

@keyframes alert-pulse-unknown {

    0%,
    100% {
        border-color: #eab308;
        box-shadow: 0 0 16px rgba(234, 179, 8, 0.25);
    }

    50% {
        border-color: #fde047;
        box-shadow: 0 0 26px rgba(234, 179, 8, 0.5);
    }
}

/* App Item Row Highlights for New/Updated App */
.app-item.new-app-virus {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.45) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

.app-item.new-app-safe {
    border: 2px solid #22c55e !important;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.35) !important;
    background: rgba(34, 197, 94, 0.06) !important;
}

.app-item.new-app-unknown {
    border: 2px solid #eab308 !important;
    box-shadow: 0 0 18px rgba(234, 179, 8, 0.35) !important;
    background: rgba(234, 179, 8, 0.06) !important;
}

.alert-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4px);
    }
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-content > strong:first-child {
    font-size: 0.95rem;
    color: #fca5a5;
    display: block;
    margin-bottom: 3px;
}

[data-theme="light"] .alert-content > strong:first-child {
    color: #dc2626;
}

.alert-desc {
    font-size: 0.825rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.alert-app-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.alert-app-pkg {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.alert-app-desc-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.35;
}

.alert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ==================== System Markets & Downloaders Hunter ==================== */
.card-warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, var(--bg-card) 100%);
}

.header-with-badge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

.warning-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.section-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.45;
}

.section-subtitle strong {
    color: var(--warning);
}

.system-markets-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    transition: all 0.3s ease;
}

.system-markets-list.collapsed {
    display: none;
}

.market-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.market-item:hover {
    background: var(--bg-card-hover);
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateX(2px);
}

.market-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.market-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.market-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.market-pkg {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.market-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--warning-bg);
    color: var(--warning);
    border-radius: 4px;
    margin-left: 6px;
}

.app-item.new-incoming {
    animation: new-app-pulse 1.5s infinite alternate;
    border-color: rgba(34, 197, 94, 0.5) !important;
}

/* ==================== Version Badges & Modals ==================== */
.version-badge-green {
    display: inline-flex;
    align-items: center;
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.badge-old-ver {
    display: inline-flex;
    align-items: center;
    color: var(--warning);
    background: var(--warning-bg);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 1 !important;
    animation: fadeIn 0.2s ease-out forwards;
}

.modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.modal-icon {
    font-size: 1.5rem;
    background: rgba(99, 102, 241, 0.15);
    padding: 8px;
    border-radius: var(--radius-sm);
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.update-steps-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 8px 0;
}

.update-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.update-step-item.active {
    color: var(--primary);
    font-weight: 600;
}

.update-step-item.done {
    color: var(--success);
}

.update-step-item.failed {
    color: var(--warning);
}

.spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.modal-qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 14px;
    margin: 10px auto;
    width: fit-content;
}

.modal-qr-box img {
    border-radius: 4px;
}

.modal-badge-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.5;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

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

@keyframes new-app-pulse {
    from {
        background: rgba(34, 197, 94, 0.08);
    }

    to {
        background: rgba(34, 197, 94, 0.2);
    }
}

/* ==================== Bonfire / Flame Effect ==================== */
.bonfire-effect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 8px;
    vertical-align: middle;
    user-select: none;
    line-height: 1;
}

.bonfire-flame {
    display: inline-block;
    font-size: 1.15rem;
    animation: bonfireFlicker 1.1s ease-in-out infinite alternate;
    transform-origin: 50% 90%;
    filter: drop-shadow(0 0 4px #ff4500) drop-shadow(0 0 8px #ff8c00);
}

@keyframes bonfireFlicker {
    0% {
        transform: scale(0.95) rotate(-3deg);
        filter: drop-shadow(0 0 3px #ff3b00) drop-shadow(0 0 6px #ff7700);
    }

    25% {
        transform: scale(1.12) rotate(3deg);
        filter: drop-shadow(0 0 6px #ff5500) drop-shadow(0 0 10px #ffaa00);
    }

    50% {
        transform: scale(1.0) rotate(-2deg);
        filter: drop-shadow(0 0 4px #ff3b00) drop-shadow(0 0 7px #ff8800);
    }

    75% {
        transform: scale(1.18) rotate(4deg);
        filter: drop-shadow(0 0 7px #ff6600) drop-shadow(0 0 13px #ffbb00);
    }

    100% {
        transform: scale(1.02) rotate(-1deg);
        filter: drop-shadow(0 0 5px #ff4500) drop-shadow(0 0 9px #ff9900);
    }
}

.item-new-incoming {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.12) 0%, var(--bg-card) 65%) !important;
    border-color: rgba(255, 87, 34, 0.5) !important;
    box-shadow: 0 0 14px rgba(255, 69, 0, 0.2);
    animation: bonfireGlowPulse 2.2s infinite ease-in-out;
}

@keyframes bonfireGlowPulse {

    0%,
    100% {
        border-color: rgba(255, 87, 34, 0.4);
        box-shadow: 0 0 8px rgba(255, 69, 0, 0.12);
    }

    50% {
        border-color: rgba(255, 87, 34, 0.8);
        box-shadow: 0 0 18px rgba(255, 69, 0, 0.3);
    }
}

/* ==================== ⚡ Anti-Hijack Burst Launch ==================== */
.btn-burst-app {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-right: 6px;
}

.btn-burst-app:hover {
    background: #f59e0b;
    color: #000;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    transform: translateY(-1px) scale(1.04);
}

.btn-burst-app:active {
    transform: scale(0.96);
}

.burst-hud-card {
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(245, 158, 11, 0.25);
    animation: burstCardShake 0.4s ease;
    max-width: 440px;
    text-align: center;
}

@keyframes burstCardShake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-3px, 2px);
    }

    40% {
        transform: translate(3px, -2px);
    }

    60% {
        transform: translate(-2px, -1px);
    }

    80% {
        transform: translate(2px, 1px);
    }
}

.burst-hud-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.burst-glow-icon {
    font-size: 2.5rem;
    display: inline-block;
    filter: drop-shadow(0 0 12px #f59e0b);
    animation: burstGlowFlash 0.5s infinite alternate;
}

@keyframes burstGlowFlash {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px #f59e0b);
    }

    100% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 18px #ffb703) drop-shadow(0 0 30px #fb8500);
    }
}

.burst-hud-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f59e0b;
    margin: 0;
}

.burst-hud-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: monospace;
    word-break: break-all;
}

.burst-hud-instruction {
    background: rgba(245, 158, 11, 0.08);
    border: 1px dashed rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.burst-finger-tap {
    font-size: 1.8rem;
    animation: fingerTapAnim 0.4s infinite alternate;
    flex-shrink: 0;
}

@keyframes fingerTapAnim {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(5px) scale(1.1);
    }
}

.burst-hud-instruction p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.burst-hud-progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.burst-hud-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    box-shadow: 0 0 10px #f59e0b;
    transition: width 0.05s linear;
}

.burst-hud-timer-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f59e0b;
    font-family: monospace;
}

/* ==================== Connection Mode Tabs ==================== */
.conn-mode-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
}

[data-theme="light"] .conn-mode-tabs {
    background: #EBFBF1;
    border-color: #BDF3D1;
}

.conn-mode-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all var(--transition);
}

.conn-mode-tab * {
    pointer-events: none;
}

.conn-mode-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.conn-mode-tab.active {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .conn-mode-tab.active {
    background: #ffffff;
    color: #1C3829;
    border-color: #A1EEBD;
    box-shadow: 0 2px 8px rgba(28, 56, 41, 0.08);
}

.mode-tab-icon {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.android-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: color var(--transition);
}

.android-logo-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}

[data-theme="light"] .android-logo-icon {
    color: #000000;
}

.tab-agent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 2.5px 6.5px;
    margin-left: 5px;
    border-radius: 5px;
    color: #ffffff;
    background: #10b981;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
    animation: tabAgentBlinkGreen 1.4s infinite ease-in-out;
}

@keyframes tabAgentBlinkGreen {
    0%, 100% {
        background-color: #059669;
        box-shadow: 0 0 3px rgba(16, 185, 129, 0.4);
        opacity: 0.85;
        transform: scale(0.97);
    }
    50% {
        background-color: #10b981;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.85);
        opacity: 1;
        transform: scale(1.04);
    }
}

[data-theme="light"] .tab-agent-badge {
    color: #ffffff;
}

.usb-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: color var(--transition);
}

.usb-logo-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: block;
}

[data-theme="light"] .usb-logo-icon {
    color: #000000;
}

.apple-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: color var(--transition);
}

.apple-logo-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: block;
}

[data-theme="light"] .apple-logo-icon {
    color: #000000;
}

.mode-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== ADB Submode Switch & Wireless Debug ==================== */
.adb-submode-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    width: 100%;
}

[data-theme="light"] .adb-submode-tabs {
    background: #EBFBF1;
    border-color: #BDF3D1;
}

.adb-submode-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
}

.adb-submode-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.adb-submode-tab.active {
    background: var(--bg-card-hover, #282c34);
    color: var(--text-primary);
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .adb-submode-tab.active {
    background: #ffffff;
    color: #1C3829;
    border-color: #A1EEBD;
    box-shadow: 0 2px 6px rgba(28, 56, 41, 0.08);
}

.badge-submode-rec {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    line-height: 1.2;
}

/* Wireless Debug Card & Form */
.adb-wireless-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.adb-wireless-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    width: 100%;
}

.adb-wireless-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.adb-wireless-field label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.adb-wireless-form input[type="text"],
.adb-wireless-form input[type="number"] {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    font-size: 0.88rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.adb-wireless-form input[type="text"]:focus,
.adb-wireless-form input[type="number"]:focus {
    border-color: #3b82f6 !important;
    background: rgba(15, 23, 42, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

[data-theme="light"] .adb-wireless-form input[type="text"],
[data-theme="light"] .adb-wireless-form input[type="number"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .adb-wireless-form input[type="text"]:focus,
[data-theme="light"] .adb-wireless-form input[type="number"]:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

.adb-pair-code-input {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: 5px !important;
    text-align: center !important;
    color: #38bdf8 !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="light"] .adb-pair-code-input {
    background: #f8fafc !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
}

.badge-ip-auto {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.25s ease;
}

.badge-ip-auto.searching {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.35);
}

.badge-ip-auto.idle {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.25);
}

@keyframes inputGlowPulse {
    0% { border-color: rgba(34, 197, 94, 0.85); box-shadow: 0 0 10px rgba(34, 197, 94, 0.35); }
    100% { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
}

.input-pulse-green {
    animation: inputGlowPulse 1.4s ease-out;
}

.adb-wireless-guide-box {
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

[data-theme="light"] .adb-wireless-guide-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* ==================== ADB Panel Styles ==================== */
.adb-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 6px;
}

.adb-icon-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.05) 65%, transparent 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    margin-bottom: 12px;
    animation: adbGoldGlow 2.4s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2), inset 0 0 14px rgba(251, 191, 36, 0.15);
}

.adb-icon-hero svg {
    width: 32px;
    height: 32px;
    fill: #fbbf24;
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.6));
}

@keyframes adbGoldGlow {

    0%,
    100% {
        transform: scale(1);
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.25), inset 0 0 10px rgba(251, 191, 36, 0.15);
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
    }

    50% {
        transform: scale(1.06);
        border-color: rgba(251, 191, 36, 0.7);
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.55), inset 0 0 18px rgba(251, 191, 36, 0.3);
        filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
    }
}

[data-theme="light"] .adb-icon-hero {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.02) 65%, transparent 100%);
    border: 1px solid rgba(217, 119, 6, 0.35);
    color: #b45309;
    box-shadow: 0 0 16px rgba(217, 119, 6, 0.12), inset 0 0 10px rgba(245, 158, 11, 0.08);
}

[data-theme="light"] .adb-icon-hero svg {
    fill: #b45309;
    filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.25));
}

/* ==================== Lite Panel Styles ==================== */
.whylite-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 6px;
    width: 100%;
}

.whylite-icon-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(56, 189, 248, 0.05) 65%, transparent 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    margin-bottom: 12px;
    animation: whyliteCyanGlow 2.4s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2), inset 0 0 14px rgba(56, 189, 248, 0.15);
}

.whylite-icon-hero svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #38bdf8;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.6));
}

@keyframes whyliteCyanGlow {
    0%,
    100% {
        transform: scale(1);
        border-color: rgba(56, 189, 248, 0.35);
        box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.15);
        filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.4));
    }

    50% {
        transform: scale(1.06);
        border-color: rgba(56, 189, 248, 0.7);
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.55), inset 0 0 18px rgba(56, 189, 248, 0.3);
        filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.8));
    }
}

[data-theme="light"] .whylite-icon-hero {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.12) 0%, rgba(2, 132, 199, 0.02) 65%, transparent 100%);
    border: 1px solid rgba(2, 132, 199, 0.35);
    color: #0284c7;
    box-shadow: 0 0 16px rgba(2, 132, 199, 0.12), inset 0 0 10px rgba(56, 189, 248, 0.08);
}

[data-theme="light"] .whylite-icon-hero svg {
    stroke: #0284c7;
    filter: drop-shadow(0 2px 4px rgba(2, 132, 199, 0.25));
}

.adb-quick-actions {
    margin-top: 8px;
    width: 100%;
}

.adb-quick-actions .btn {
    width: 100%;
}

.inline-hint-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

.hint-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.btn-mode-silent {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
}

.btn-mode-silent:hover {
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6) !important;
}

/* ==================== In-Place Contextual Notifications ==================== */
.app-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    font-size: 0.78rem;
    white-space: nowrap;
    min-height: 24px;
}

.app-status {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
    flex-shrink: 0;
}

.status-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    animation: statusBadgePopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s ease;
}

@keyframes statusBadgePopIn {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.status-badge-inline.status-pending {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}

.status-badge-inline.status-success {
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #4ade80;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.status-badge-inline.status-warning {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fbbf24;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.status-badge-inline.status-error {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
    animation: statusBadgeShake 0.35s ease;
}

.status-badge-inline.status-burst {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
    animation: burstBadgePulse 0.8s infinite alternate ease-in-out;
}

@keyframes burstBadgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
    }

    100% {
        transform: scale(1.04);
        box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
    }
}

@keyframes statusBadgeShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-4px);
    }

    40%,
    80% {
        transform: translateX(4px);
    }
}

/* Row states */
.app-item.item-busy {
    border-color: rgba(99, 102, 241, 0.45) !important;
    background: rgba(99, 102, 241, 0.06) !important;
    box-shadow: inset 0 0 12px rgba(99, 102, 241, 0.1);
}

.app-item.item-success-flash {
    border-color: rgba(34, 197, 94, 0.7) !important;
    background: rgba(34, 197, 94, 0.15) !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
    transition: all 0.3s ease;
}

.app-item.item-bursting {
    border-color: rgba(245, 158, 11, 0.8) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

/* In-place Button Feedback */
.btn-inline-busy {
    pointer-events: none;
    opacity: 0.85;
}

.btn-agent-ready {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    color: #4ade80 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-agent-ready:hover {
    background: rgba(34, 197, 94, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.7) !important;
    color: #86efac !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2) !important;
}

.btn-agent-updating {
    background: rgba(234, 179, 8, 0.12) !important;
    border: 1px solid rgba(234, 179, 8, 0.5) !important;
    color: #facc15 !important;
    font-weight: 500 !important;
    pointer-events: none;
}

.btn-inline-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4) !important;
}

.btn-inline-error {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
    animation: statusBadgeShake 0.35s ease;
}

/* In-place Feedback Containers (under cards/buttons) */
.inline-feedback-msg {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeInSlideDown 0.25s ease-out;
}

.inline-feedback-pending {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

.inline-feedback-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.inline-feedback-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.inline-feedback-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

/* ==================== Google Play Store Check Button ==================== */
.btn-playstore-check {
    background: rgba(14, 165, 233, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-weight: 600;
    gap: 4px;
}

[data-theme="light"] .btn-playstore-check {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.3);
}

.btn-playstore-check:hover:not(:disabled) {
    background: rgba(14, 165, 233, 0.25);
    color: #e0f2fe;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(56, 189, 248, 0.25);
}

[data-theme="light"] .btn-playstore-check:hover:not(:disabled) {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

/* ==================== Right Slide Drawer (Side-by-Side Centered Panel) ==================== */
.drawer-overlay {
    display: none !important;
}

.playstore-drawer {
    width: 0;
    min-width: 0;
    max-width: 0;
    height: 0;
    min-height: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    flex-shrink: 0;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        min-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease,
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    z-index: 100;
}

.app-layout-container.drawer-open .playstore-drawer {
    width: 380px;
    min-width: 350px;
    max-width: 380px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    top: 0;
    box-sizing: border-box;
}

[data-theme="light"] .app-layout-container.drawer-open .playstore-drawer {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* Active Inspecting App Row Highlight in the Main List */
.app-item.item-playstore-active {
    border-color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
    box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.35), 0 4px 16px rgba(56, 189, 248, 0.15) !important;
}

@media (max-width: 1100px) {
    .app-layout-container.drawer-open {
        flex-direction: column;
        max-width: 960px;
    }

    .app-layout-container.drawer-open main {
        max-width: 100%;
    }

    .apps-drawer-stage {
        flex-direction: column;
    }

    .app-layout-container.drawer-open .playstore-drawer {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        position: static;
        height: auto;
        max-height: 80vh;
    }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.drawer-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.drawer-title-group h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--transition);
}

.drawer-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    transform: rotate(90deg);
}

.drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.drawer-body::-webkit-scrollbar {
    width: 6px;
}

.drawer-body::-webkit-scrollbar-track {
    background: transparent;
}

.drawer-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Drawer Hero Card */
.ps-hero-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    position: relative;
}

.ps-app-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    background: #1e1e2d;
    flex-shrink: 0;
}

.ps-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ps-app-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.ps-developer-name {
    font-size: 0.85rem;
    color: var(--accent-hover);
    font-weight: 500;
}

.ps-pkg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition);
}

.ps-pkg-pill:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.1);
}

/* Security Verification Badges */
.ps-security-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    animation: fadeInSlideDown 0.25s ease-out;
}

.ps-security-banner.ps-official {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.ps-security-banner.ps-warning {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.ps-sec-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.ps-sec-text h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.ps-official .ps-sec-text h4 {
    color: #4ade80;
}

.ps-warning .ps-sec-text h4 {
    color: #f87171;
}

.ps-sec-text p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Stats Row */
.ps-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ps-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.ps-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ps-stat-value.ps-rating {
    color: #facc15;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ps-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Screenshots Carousel */
.ps-screenshots-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-screenshots-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ps-screenshots-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.ps-screenshots-carousel.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.ps-screenshots-carousel::-webkit-scrollbar {
    height: 5px;
}

.ps-screenshots-carousel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.ps-screenshot-item {
    height: 180px;
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    flex-shrink: 0;
    transition: transform var(--transition);
    -webkit-user-drag: none;
    user-select: none;
}

.ps-screenshot-item:hover {
    transform: scale(1.03);
}

/* Description Card */
.ps-desc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-desc-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ps-desc-body {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-height: 180px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 4px;
}

.ps-desc-body::-webkit-scrollbar {
    width: 4px;
}

.ps-desc-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* Action Footer */
.drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.drawer-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.drawer-actions-grid .btn {
    padding: 9px 10px;
    font-size: 0.82rem;
    white-space: nowrap;
    justify-content: center;
}

.btn-play-link {
    background: rgba(2, 132, 199, 0.08);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-weight: 600;
    width: 100%;
    box-shadow: none;
    text-decoration: none;
    transition: all var(--transition);
}

.btn-play-link:hover {
    background: rgba(2, 132, 199, 0.18);
    border-color: #38bdf8;
    color: #e0f2fe;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}

[data-theme="light"] .btn-play-link {
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.3);
}

[data-theme="light"] .btn-play-link:hover {
    background: rgba(2, 132, 199, 0.15);
    border-color: #0284c7;
    color: #0369a1;
}

/* Shimmer Loading Skeleton */
.ps-skeleton-loader {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.2s ease-out;
}

.ps-skeleton-box {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: psShimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

[data-theme="light"] .ps-skeleton-box {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
    animation: psShimmer 1.5s infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* ═══════════════════════════════════════════════
   Modern Device Header Dropdown Menu
   ═══════════════════════════════════════════════ */
.summary-device-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.device-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition);
    user-select: none;
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    flex-shrink: 0;
}

.device-menu-trigger * {
    pointer-events: none;
}

.device-menu-trigger:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

.device-menu-trigger.disabled-trigger {
    cursor: default !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.device-menu-trigger.disabled-trigger:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-theme="light"] .device-menu-trigger.disabled-trigger:hover {
    background: #EBFBF1 !important;
    border-color: #BDF3D1 !important;
}

.device-trigger-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}

.device-trigger-content strong {
    font-size: 0.86rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-trigger-content .summary-ip {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-trigger-chevron {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    margin-left: 2px;
}

.device-trigger-chevron.open {
    transform: rotate(180deg);
    color: var(--primary);
}

/* Floating Glassmorphism Dropdown */
.device-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 320px;
    max-width: 380px;
    z-index: 99999;
    pointer-events: auto;
    background: rgba(20, 20, 31, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 12px;
    animation: dropdownPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .device-dropdown-menu {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@keyframes dropdownPop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

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

.dropdown-device-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 8px;
}

[data-theme="light"] .dropdown-device-card {
    background: rgba(0, 0, 0, 0.03);
}

.dropdown-device-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.dropdown-avatar {
    font-size: 1.4rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-device-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-device-titles strong {
    font-size: 0.88rem;
}

.dropdown-storage-preview {
    margin-top: 4px;
}

.dropdown-storage-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.dropdown-storage-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.dropdown-storage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.dropdown-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 8px;
    text-transform: uppercase;
}

.dropdown-items-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.dropdown-item * {
    pointer-events: none;
}

.dropdown-item:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(3px);
}

.dropdown-item-icon {
    font-size: 1.15rem;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.dropdown-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.dropdown-item-info strong {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.dropdown-item-info small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dropdown-item-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
    transition: all 0.15s ease;
}

.dropdown-item:hover .dropdown-item-arrow {
    opacity: 1;
    color: var(--primary);
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════════
   Dedicated Device Workspace Modal (Supabase Style)
   ═══════════════════════════════════════════════ */
.workspace-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    padding: 24px !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    animation: fadeIn 0.2s ease-out forwards;
}

.workspace-section.hidden {
    display: none !important;
}

.workspace-modal-dialog {
    width: 100%;
    max-width: 1100px;
    height: 86vh;
    max-height: 840px;
    min-height: 520px;
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #161b22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 12px;
}

.workspace-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.workspace-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-workspace-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #21262d !important;
    color: #e6edf3 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.18s ease;
    cursor: pointer;
    user-select: none;
}

.btn-workspace-back:hover {
    background: #30363d !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-workspace-back:active {
    transform: translateY(0);
}

.btn-workspace-back .back-arrow-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    transition: transform 0.18s ease;
}

.btn-workspace-back:hover .back-arrow-svg {
    transform: translateX(-2px);
}

.workspace-close-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.workspace-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.12);
}

.workspace-device-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    color: #e6edf3;
}

.hub-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

/* Workspace Tabs Bar - Supabase minimalist tabs */
.workspace-tabs-bar {
    display: flex;
    gap: 6px;
    padding: 0 18px;
    background: #0d1117;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.18s ease;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}

.workspace-tab:hover {
    color: var(--text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.02);
    transform: none;
}

.workspace-tab.active {
    color: #58a6ff;
    border-bottom-color: #58a6ff;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
}

.workspace-tab .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: currentColor;
    flex-shrink: 0;
}

.workspace-tab .tab-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.workspace-tab .tab-text-group strong {
    font-size: 0.84rem;
}

/* Tab Panels */
.hub-tab-panel {
    display: none;
    padding: 20px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    flex: 1;
    min-height: 0;
}

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

/* Telemetry Specs Grid */
.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .telemetry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .telemetry-grid {
        grid-template-columns: 1fr;
    }
}

.telemetry-card {
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.telemetry-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.telemetry-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.telemetry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #58a6ff;
}

.telemetry-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.telemetry-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
}

.telemetry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.telemetry-row strong,
.telemetry-row span {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telemetry-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 6px;
}

.telemetry-progress-bar-fill {
    height: 100%;
    background: #58a6ff;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.telemetry-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
}

/* Storage Card */
.storage-card {
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.storage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 10px;
}

.storage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #58a6ff;
}

.storage-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.storage-progress-bar-fill {
    height: 100%;
    background: #58a6ff;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.storage-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

/* Quick Folders */
.hub-quick-shortcuts h4 {
    margin: 0 0 12px 0;
    font-size: 0.92rem;
}

.quick-folder-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .quick-folder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.quick-folder-btn {
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
    color: var(--text-primary);
}

.quick-folder-btn:hover {
    background: #21262d;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quick-folder-btn .quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #58a6ff;
    flex-shrink: 0;
}

.quick-info strong {
    display: block;
    font-size: 0.86rem;
}

.quick-info small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

[data-theme="light"] .workspace-modal-dialog {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .workspace-topbar,
[data-theme="light"] .telemetry-card,
[data-theme="light"] .storage-card,
[data-theme="light"] .quick-folder-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .btn-workspace-back {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-workspace-back:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .workspace-tabs-bar {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* File Explorer */
.file-explorer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.file-breadcrumbs-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 260px;
}

.file-path-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 4px 0 8px;
    flex: 1;
    min-width: 140px;
    transition: all 0.18s ease;
}

.file-path-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    background: var(--bg-card-hover);
}

.file-path-icon {
    font-size: 0.88rem;
    opacity: 0.7;
    margin-right: 6px;
    flex-shrink: 0;
}

.file-path-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    padding: 6px 4px;
    width: 100%;
    flex: 1;
}

.btn-file-go {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-file-go:hover {
    background: #6366f1;
    color: #ffffff;
}

/* Quick Location Preset Chips */
.file-quick-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 10px 0;
    margin-bottom: 8px;
    scrollbar-width: thin;
}

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Consolas', 'Monaco', monospace;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.16s ease;
    flex-shrink: 0;
}

[data-theme="light"] .file-chip {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

.file-chip:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #818cf8;
    transform: translateY(-1px);
}

[data-theme="light"] .file-chip:hover {
    background: #e0e7ff;
    color: #4338ca;
}

.file-chip.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.file-toolbar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.file-upload-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.file-dropzone {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    min-height: 280px;
    max-height: 420px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════
   File Explorer Multi-Select & Batch Action Bar
   (Stationed directly below file table, zero-jump smooth transition)
   ═══════════════════════════════════════════════ */
.file-batch-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.16) 100%);
    border: 1px solid rgba(129, 140, 248, 0.4);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.25s ease, padding 0.25s ease;
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    visibility: visible;
}

[data-theme="light"] .file-batch-bar {
    background: linear-gradient(135deg, #e0f2fe 0%, #e0e7ff 100%);
    border: 1px solid #93c5fd;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
}

.file-batch-bar.hidden,
#section-device-workspace.hidden .file-batch-bar,
.hub-tab-panel:not(.active) .file-batch-bar {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-color: transparent !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(-4px) !important;
}

@media (max-width: 768px) {
    .file-batch-bar {
        padding: 8px 12px;
        gap: 8px;
        flex-direction: column;
        max-height: 140px;
    }

    .file-batch-left,
    .file-batch-actions {
        width: 100%;
        justify-content: center;
    }
}

.file-batch-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.file-batch-count {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.25);
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.4);
    letter-spacing: 0.2px;
}

[data-theme="light"] .file-batch-count {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.file-batch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Checkbox component for File Explorer */
.file-check-cell {
    width: 44px;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
}

.file-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
    cursor: var(--cursor-mirror) !important;
    user-select: none;
    position: relative;
    padding: 0;
    margin: 0;
}

.file-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.file-checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-hover);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-sizing: border-box;
    pointer-events: none;
    /* Passes click directly to label */
}

.file-checkbox-label:hover .file-checkmark {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.12);
}

.file-checkbox-label input[type="checkbox"]:checked~.file-checkmark {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.file-checkbox-label input[type="checkbox"]:checked~.file-checkmark::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.file-checkbox-label input[type="checkbox"]:indeterminate~.file-checkmark {
    background: var(--accent);
    border-color: var(--accent);
}

.file-checkbox-label input[type="checkbox"]:indeterminate~.file-checkmark::after {
    content: '−';
    color: white;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

/* File Row & Card Selection States */
.file-row.is-selected {
    background: rgba(99, 102, 241, 0.14) !important;
}

.file-row.is-selected:hover {
    background: rgba(99, 102, 241, 0.22) !important;
}

.file-grid-card.is-selected {
    border-color: var(--accent) !important;
    box-shadow: 0 0 14px var(--accent-glow) !important;
    background: rgba(99, 102, 241, 0.12) !important;
}

.file-grid-select-wrap {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.file-grid-card:not(:hover):not(.is-selected) .file-grid-select-wrap {
    opacity: 0.7;
}

/* ═══ Screen Mirror Custom Cursor for All Clickable File Points ═══ */
.file-row,
.file-row td,
.file-row .file-name-cell,
.file-row .file-check-cell,
.file-checkbox-label,
.file-checkbox-label input,
.file-checkmark,
.file-action-btn,
.btn-open-folder,
.btn-delete-file,
.file-grid-card,
.file-grid-select-wrap,
.file-grid-actions,
.file-grid-actions button,
.file-grid-actions a,
.file-batch-bar button,
.file-chip,
.file-view-toggle-btn,
.file-upload-label,
.btn-file-go,
#btn-file-up,
#btn-file-refresh,
#btn-file-mkdir,
#check-all-files {
    cursor: var(--cursor-mirror) !important;
}

.file-row:active,
.file-row td:active,
.file-row .file-name-cell:active,
.file-row .file-check-cell:active,
.file-checkbox-label:active,
.file-checkbox-label input:active,
.file-checkmark:active,
.file-action-btn:active,
.btn-open-folder:active,
.btn-delete-file:active,
.file-grid-card:active,
.file-grid-select-wrap:active,
.file-grid-actions button:active,
.file-grid-actions a:active,
.file-batch-bar button:active,
.file-chip:active,
.file-view-toggle-btn:active,
.file-upload-label:active,
.btn-file-go:active,
#btn-file-up:active,
#btn-file-refresh:active,
#btn-file-mkdir:active,
#check-all-files:active {
    cursor: var(--cursor-mirror-active) !important;
}

.file-list-table-wrapper,
.file-grid-wrapper {
    width: 100%;
}

.file-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.file-table th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}

.file-table td {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.file-row {
    transition: all 0.15s ease;
}

.file-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.file-row.is-folder {
    cursor: pointer;
    background: rgba(99, 102, 241, 0.02);
}

.file-row.is-folder:hover {
    background: rgba(99, 102, 241, 0.08);
}

.file-row.is-folder .file-name-text {
    font-weight: 600;
    color: var(--text-primary);
}

.file-row.is-folder:hover .file-name-text {
    color: #818cf8;
}

.folder-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .folder-tag {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.file-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.file-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.file-name-text {
    word-break: break-all;
    transition: color 0.15s ease;
}

.file-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: all var(--transition);
}

.file-action-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.btn-open-folder {
    font-size: 0.95rem;
}

.btn-open-folder:hover {
    background: rgba(99, 102, 241, 0.2);
}

.dropzone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(99, 102, 241, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 10;
}

/* ═══ File Explorer View Switcher & Grid Cards ═══ */
.file-view-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
    margin-left: 4px;
}

.file-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.file-view-toggle-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.file-view-toggle-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.file-grid-wrapper {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}

.file-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.file-grid-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    position: relative;
}

.file-grid-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    background: var(--bg-card-hover);
}

.file-grid-thumb-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.file-grid-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.file-grid-thumb-img.loaded {
    opacity: 1;
}

.file-grid-thumb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 2.2rem;
    color: var(--text-muted);
}

.file-grid-thumb-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: thumbShimmer 1.5s infinite linear;
}

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

    100% {
        background-position: 200% 0;
    }
}

.file-grid-info {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-grid-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.file-grid-card:hover .file-grid-name {
    color: #818cf8;
}

.file-grid-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.file-grid-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 4px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 2px 4px;
    z-index: 5;
}

.file-grid-card:hover .file-grid-actions {
    display: flex;
}

/* ═══ Quick Preview Lightbox Modal ═══ */
.file-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.file-preview-modal.hidden {
    display: none !important;
}

.file-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
}

.file-preview-dialog {
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    max-height: 90vh;
    min-width: 340px;
    overflow: hidden;
    animation: previewZoom 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes previewZoom {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.file-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.file-preview-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.file-preview-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 450px;
}

.file-preview-size {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.file-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-preview-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.15rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-preview-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.file-preview-body {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: rgba(0, 0, 0, 0.45);
    min-height: 250px;
    max-height: calc(90vh - 70px);
}

.file-preview-body img {
    max-width: 100%;
    max-height: calc(85vh - 80px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.file-preview-body video {
    max-width: 100%;
    max-height: calc(85vh - 80px);
    border-radius: 6px;
    outline: none;
}

.file-preview-text-content {
    width: 100%;
    max-height: calc(85vh - 80px);
    overflow: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bg-tertiary);
    padding: 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* APK Export List */
.apks-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.search-input-sm {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    flex: 1;
    max-width: 320px;
}

.apk-extract-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.apk-item-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.apk-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.apk-item-info img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex-shrink: 0;
}

.apk-item-text strong {
    display: block;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apk-item-text small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==================== Left Slide Drawer (Screen Mirror) ==================== */
.btn-mirror {
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: var(--text-primary) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
}

.btn-mirror:hover {
    border-color: var(--primary) !important;
    background: rgba(99, 102, 241, 0.12) !important;
    transform: translateY(-1px);
}

.btn-mirror.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.mirror-drawer {
    width: 0;
    min-width: 0;
    max-width: 0;
    height: 0;
    min-height: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    flex-shrink: 0;
    align-self: flex-start;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        min-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease,
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    z-index: 100;
}

.app-layout-container.mirror-open .mirror-drawer {
    width: 380px;
    min-width: 350px;
    max-width: 380px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    top: 0;
    box-sizing: border-box;
}

[data-theme="light"] .app-layout-container.mirror-open .mirror-drawer {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1200px) {
    .app-layout-container.mirror-open {
        flex-direction: column;
    }

    .apps-drawer-stage {
        flex-direction: column;
        gap: 16px !important;
    }

    .app-layout-container.mirror-open #section-connect,
    .app-layout-container.mirror-open #section-system-markets,
    .app-layout-container.mirror-open #section-ios,
    .app-layout-container.mirror-open #section-logs,
    .app-layout-container.mirror-open #incoming-app-banner,
    .app-layout-container.mirror-open .alert-banner {
        margin-left: 0 !important;
    }

    .app-layout-container.mirror-open .mirror-drawer {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        max-height: 80vh !important;
        order: -1;
    }

    .apps-drawer-stage #section-apps {
        max-width: 100% !important;
    }
}

.mirror-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    color: var(--text-primary);
}

.mirror-drawer-body {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
    box-sizing: border-box;
}

.live-dot-pulse {
    width: 9px;
    height: 9px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: livePulse 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes livePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.mirror-viewport-container {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
}

.mirror-canvas-wrapper {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.mirror-canvas-wrapper.streaming-active {
    min-height: 0;
}

.mirror-canvas {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: default;
    touch-action: none;
}

.mirror-canvas:active {
    cursor: default;
}

.mirror-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 29, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    z-index: 5;
    transition: opacity 0.2s ease;
    color: var(--text-primary);
    text-align: center;
    padding: 14px 10px;
}

.mirror-loader-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.mirror-loader .spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(125, 125, 125, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.mirror-loader p {
    color: var(--text-primary);
    margin-top: 2px;
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 0.86rem;
    flex-shrink: 0;
}

.mirror-loader small,
#mirror-status-sub {
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 2px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* ─── Visual Prompt Preview Guide (Start Now dialog) ─── */
.mirror-prompt-preview {
    margin-top: 8px;
    width: 100%;
    max-width: 260px;
    animation: fadeInPrompt 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

@keyframes fadeInPrompt {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

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

.prompt-preview-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 14px;
    padding: 8px 8px 10px 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(99, 102, 241, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
}

.prompt-preview-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #a5b4fc;
    letter-spacing: 0.02em;
}

.prompt-preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 6px #60a5fa;
    animation: pulse 1.8s infinite;
}

.prompt-preview-img-container {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.prompt-preview-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.prompt-highlight-tap {
    position: absolute;
    bottom: 6px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    animation: tapPulse 1.2s ease-in-out infinite;
    z-index: 10;
}

.prompt-highlight-tap .tap-pointer-hand {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.95));
}

.prompt-highlight-tap .tap-label {
    background: #2563eb;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: -3px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

@keyframes tapPulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.08);
    }
}

.prompt-preview-caption {
    margin-top: 8px;
    text-align: center;
    line-height: 1.35;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 6px;
    padding: 5px 8px;
    width: 100%;
}

.prompt-preview-caption span {
    font-size: 0.73rem;
    font-weight: 600;
    color: #e0e7ff;
}

.prompt-preview-caption strong {
    color: #60a5fa;
    text-decoration: underline;
}

.mirror-nav-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    gap: 6px;
}

.mirror-ussd-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    gap: 8px;
    box-sizing: border-box;
}

.mirror-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    text-align: center;
    min-height: 42px;
}

.mirror-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.mirror-action-btn:active {
    transform: translateY(1px) scale(0.97);
}

.mirror-action-btn .action-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.2px;
}

/* Individual Color Accents (Dark Mode Default) */
.btn-cancel-sms {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.16) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.btn-cancel-sms:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-cancel-loan {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.btn-cancel-loan:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.btn-block-sms {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}

.btn-block-sms:hover {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

/* Light Theme Overrides */
[data-theme="light"] .mirror-viewport-container {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .mirror-ussd-bar {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

[data-theme="light"] .btn-cancel-sms {
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.3);
    color: #b91c1c;
}

[data-theme="light"] .btn-cancel-sms:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.25);
}

[data-theme="light"] .btn-cancel-loan {
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.3);
    color: #b45309;
}

[data-theme="light"] .btn-cancel-loan:hover {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.25);
}

[data-theme="light"] .btn-block-sms {
    background: rgba(35, 134, 79, 0.08);
    border-color: rgba(35, 134, 79, 0.3);
    color: #23864f;
}

[data-theme="light"] .btn-block-sms:hover {
    background: #23864f;
    border-color: #23864f;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(35, 134, 79, 0.25);
}

/* ==================== Audit & Uninstall History Logs ==================== */
.logs-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: visible;
}

.logs-toolbar-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.logs-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 130px;
    max-width: 220px;
}

.logs-search-icon {
    position: absolute;
    left: 10px;
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0.6;
}

.logs-search-wrapper input {
    width: 100%;
    padding-left: 32px;
}

/* Theme Styled Dropdown Selects */
.select-theme-styled,
.select-input-sm {
    background: #1c1c28;
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 6px 26px 6px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all 0.18s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    white-space: nowrap;
    flex-shrink: 0;
}

[data-theme="light"] .select-theme-styled,
[data-theme="light"] .select-input-sm {
    background-color: #ffffff;
    color: #1C3829;
    border-color: #BDF3D1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2351775F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.select-theme-styled option,
.select-input-sm option {
    background: #181824;
    color: #f1f5f9;
    padding: 6px 10px;
}

[data-theme="light"] .select-theme-styled option,
[data-theme="light"] .select-input-sm option {
    background: #ffffff;
    color: #1C3829;
}

.select-theme-styled:hover,
.select-input-sm:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background-color: #242436;
}

[data-theme="light"] .select-theme-styled:hover,
[data-theme="light"] .select-input-sm:hover {
    border-color: #71A784;
    background-color: #F6FDF8;
}

.select-theme-styled:focus,
.select-input-sm:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.logs-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Dropdown Menu Component */
.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 170px;
    background: #1e1e2d;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    padding: 4px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[data-theme="light"] .dropdown-menu {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

[data-theme="light"] .dropdown-item:hover {
    background: #f1f5f9;
    color: #4f46e5;
}

.dropdown-item-icon {
    font-size: 0.95rem;
}

.logs-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: auto;
    min-height: 140px;
    height: auto;
    max-height: 580px;
    position: relative;
}

@media (orientation: portrait), (min-height: 950px) {
    .logs-table-wrapper {
        max-height: calc(100vh - 280px);
    }
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    text-align: left;
}

.logs-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    z-index: 2;
    border-bottom: 1px solid var(--border);
}

.logs-table th {
    padding: 10px 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.logs-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.logs-table tbody tr {
    transition: background var(--transition);
}

.logs-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .logs-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

.log-app-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 280px;
}

.log-app-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.log-app-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.log-app-name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-pkg-name {
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-datetime-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.log-date {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 500;
}

.log-time {
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted);
    opacity: 0.85;
}

.log-device-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 140px;
}

.log-device-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-device-serial {
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-badge-mode-wifi {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.log-badge-mode-adb {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.log-badge-action-uninstall {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.log-badge-action-skull {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.45);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

[data-theme="light"] .log-badge-action-skull {
    background: rgba(147, 51, 234, 0.1);
    color: #7e22ce;
    border-color: rgba(147, 51, 234, 0.35);
}

.log-badge-action-disable {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.log-badge-action-enable {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.log-badge-action-clear-data {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.log-badge-action-clear-cache {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
    border: 1px solid rgba(20, 184, 166, 0.35);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.logs-empty-state {
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.logs-empty-state .empty-icon {
    font-size: 2.4rem;
    opacity: 0.5;
    margin-bottom: 4px;
}

.logs-empty-state strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.logs-empty-state p {
    font-size: 0.84rem;
    max-width: 380px;
    margin: 0;
}

/* ══════════════════════════════════════════════════
   Contacts Manager & Converter Styles
   ══════════════════════════════════════════════════ */
.contacts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.contacts-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 240px;
}

.contacts-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contacts-layout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    padding: 16px;
    min-height: 480px;
}

@media (max-width: 900px) {
    .contacts-layout-grid {
        grid-template-columns: 1fr;
    }
}

.contacts-table-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.contacts-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
}

.contacts-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.contacts-table-wrapper {
    flex: 1;
    height: auto;
    min-height: 140px;
    max-height: 420px;
    overflow-y: auto;
}

@media (orientation: portrait), (min-height: 950px) {
    .contacts-table-wrapper {
        max-height: calc(100vh - 300px);
    }
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.contacts-table th {
    position: sticky;
    top: 0;
    background: #191924;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    z-index: 2;
}

.contacts-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.contacts-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.contact-phone-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    font-size: 0.76rem;
    font-family: ui-monospace, monospace;
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

.contact-phone-chip .chip-label {
    opacity: 0.7;
    font-size: 0.68rem;
    text-transform: uppercase;
}

/* Cross-Platform Converter Card */
.contacts-converter-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.converter-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
}

.converter-icon {
    font-size: 1.3rem;
}

.converter-card-header strong {
    font-size: 0.92rem;
    display: block;
    color: var(--text-primary);
}

.converter-card-header small {
    font-size: 0.74rem;
}

.converter-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.converter-mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.converter-mode-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.18s ease;
}

.converter-mode-opt:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.05);
}

.converter-mode-opt.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 0 0 1px #6366f1;
}

.converter-mode-opt .mode-tag {
    font-size: 1.2rem;
}

.converter-mode-opt strong {
    font-size: 0.82rem;
    display: block;
    color: var(--text-primary);
}

.converter-mode-opt small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.converter-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.015);
    cursor: pointer;
    transition: all 0.2s ease;
}

.converter-dropzone:hover,
.converter-dropzone.dragover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.06);
}

.converter-dropzone .dropzone-icon {
    font-size: 2rem;
    margin-bottom: 2px;
    opacity: 0.8;
}

.converter-dropzone strong {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.converter-result-box {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.converter-result-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

/* ══════════════════════════════════════════════════
   Apple iOS Bridge Styles
   ══════════════════════════════════════════════════ */
.ios-panel-card {
    border-color: var(--border);
    background: transparent;
}

.ios-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0;
}

.ios-icon-hero {
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ios-icon-hero.apple-logo-icon svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
    display: block;
}

.ios-trust-banner {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-primary);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ios-trust-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-align: center;
}

[data-theme="light"] .ios-trust-banner {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════
   Apple iOS Dedicated Dashboard UI
   ══════════════════════════════════════════════════ */
.ios-dashboard-card {
    display: flex;
    gap: 24px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.ios-device-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    width: 130px;
}

.ios-phone-mockup {
    width: 110px;
    height: 200px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1b384f 0%, #0d1e2d 100%);
    border: 3.5px solid #38678f;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(56, 189, 248, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 6px;
}

.ios-mockup-speaker {
    width: 24px;
    height: 4px;
    border-radius: 4px;
    background: #475569;
    margin-bottom: 8px;
}

.ios-mockup-screen {
    flex: 1;
    width: 100%;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
}

.ios-screen-logo {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
    margin-bottom: 4px;
}

.ios-screen-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.ios-screen-sub {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 2px;
}

.ios-trust-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    font-weight: 600;
}

.ios-specs-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ios-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.ios-spec-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ios-spec-item.full-width {
    grid-column: 1 / -1;
}

.ios-spec-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ios-spec-val {
    font-size: 0.92rem;
    color: var(--text-primary);
    word-break: break-all;
}

.ios-storage-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ios-storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.ios-storage-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.ios-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8 0%, #ec4899 100%);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.ios-tools-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.ios-tool-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.ios-tool-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
}

.ios-tool-btn.active {
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.ios-tool-icon {
    font-size: 1.5rem;
}

.ios-tool-text {
    display: flex;
    flex-direction: column;
}

.ios-tool-text strong {
    font-size: 0.9rem;
}

.ios-tool-text small {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.ios-apps-sub-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
}

.ios-apps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.ios-apps-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.btn-appstore-link {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-appstore-link:hover {
    background: #38bdf8;
    color: #000;
}

@media (max-width: 768px) {
    .ios-dashboard-card {
        flex-direction: column;
        align-items: center;
    }

    .ios-device-avatar-col {
        width: 100%;
    }
}

/* Contacts Suite Sub-Section */
.ios-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ios-contact-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ios-contact-card-icon {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.ios-contact-card h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.ios-contact-card p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ios-vcf-result-area {
    background: var(--bg-tertiary);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 14px;
}

.ios-vcf-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ios-vcf-preview-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    max-height: 160px;
    overflow-y: auto;
    font-size: 0.76rem;
    color: #a7f3d0;
    font-family: monospace;
    white-space: pre-wrap;
}

/* Storage Categories Grid */
.ios-storage-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ios-storage-cat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ios-cat-icon {
    font-size: 1.6rem;
}

.ios-cat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ios-cat-info strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.ios-cat-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ios-cat-size {
    font-size: 0.9rem;
    font-weight: 700;
    color: #38bdf8;
}

.ios-storage-guidance-box {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.82rem;
}

.ios-storage-guidance-box .guidance-title {
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 4px;
}

.ios-storage-guidance-box p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ios-storage-guidance-box code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #f472b6;
}

/* ==================== iOS Contacts Management Table & Suite ==================== */
.ios-contacts-manager-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 16px;
}

.ios-contacts-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.contacts-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacts-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ios-contacts-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.contacts-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.contacts-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    pointer-events: none;
}

.contacts-search-input {
    width: 100%;
    padding: 7px 32px 7px 34px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s;
}

.contacts-search-input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.contacts-search-clear {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

.contacts-search-clear:hover {
    color: #ef4444;
}

.ios-contacts-table-wrap {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
}

.ios-contacts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}

.ios-contacts-table thead {
    background: rgba(0, 0, 0, 0.35);
    position: sticky;
    top: 0;
    z-index: 2;
}

.ios-contacts-table th {
    padding: 9px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.ios-contacts-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.ios-contacts-table tbody tr {
    transition: background 0.15s ease;
}

.ios-contacts-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ios-contacts-table tbody tr.row-selected {
    background: rgba(56, 189, 248, 0.08);
}

.ios-contact-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    margin: 0 auto;
}

.ios-contact-name-cell {
    display: flex;
    flex-direction: column;
}

.ios-contact-fullname {
    font-weight: 600;
    color: var(--text-primary);
}

.ios-contact-subname {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ios-phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    margin-right: 4px;
}

.ios-phone-badge.badge-work {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.ios-phone-badge.badge-home {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.ios-phone-text {
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.ios-contacts-empty {
    padding: 30px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==================== 3uTools Style iCloud Notice Card ==================== */
.icloud-sync-notice-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(56, 189, 248, 0.3);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: modalFadeIn 0.3s ease-out;
}

.icloud-cloud-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.icloud-cloud-art {
    font-size: 3.8rem;
    filter: drop-shadow(0 4px 16px rgba(56, 189, 248, 0.35));
    line-height: 1;
}

.icloud-bird-fly {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 1.4rem;
    animation: birdFloat 2.5s infinite alternate ease-in-out;
}

@keyframes birdFloat {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(4px, -6px);
    }
}

.icloud-notice-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.2px;
}

.icloud-notice-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.icloud-steps-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.icloud-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.step-badge {
    background: #38bdf8;
    color: #000;
    font-weight: 800;
    font-size: 0.72rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icloud-path-tag {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0 4px 26px;
    font-size: 0.76rem;
    color: #38bdf8;
}

.icloud-path-tag code {
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #f472b6;
    font-weight: 600;
}

.icloud-notice-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ios-contact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.btn-contact-action {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-contact-action.btn-edit {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.25);
    background: rgba(56, 189, 248, 0.08);
}

.btn-contact-action.btn-edit:hover {
    background: #38bdf8;
    color: #000;
}

.btn-contact-action.btn-delete {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
}

.btn-contact-action.btn-delete:hover {
    background: #ef4444;
    color: #fff;
}

/* ==================== Modal Backdrop & Dialog ==================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.btn-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.2s;
}

.btn-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ef4444;
}

/* ══════════════════════════════════════════════════
   Virus Clean & Protected Apps Buttons & Modals
   ══════════════════════════════════════════════════ */
.btn-outline-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.btn-outline-warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    transition: all 0.2s ease;
}

.btn-outline-warning:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fde68a;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.btn-outline-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    transition: all 0.2s ease;
}

.btn-outline-success:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #6ee7b7;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.btn-outline-success:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(16, 185, 129, 0.2);
    color: rgba(52, 211, 153, 0.45);
    background: transparent;
}

.safe-app-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.safe-app-item:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.safe-app-item.selected {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
}

.safe-app-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
}

.safe-app-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.safe-app-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.safe-app-pkg {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.protects-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
    animation: modalFadeIn 0.2s ease-out;
}

.protects-warning-card {
    max-width: 540px;
    width: 100%;
    background: var(--bg-secondary, #181824);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.protects-modal-body {
    padding: 16px 20px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.4) rgba(0, 0, 0, 0.2);
}

.protects-modal-body::-webkit-scrollbar {
    width: 6px;
}

.protects-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.protects-modal-body::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.35);
    border-radius: 3px;
}

.protects-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.6);
}

.protects-apps-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.protects-app-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.protects-app-row:hover {
    background: rgba(245, 158, 11, 0.06);
}

.protects-app-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.protects-app-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.protects-app-pkg {
    font-size: 0.74rem;
    color: var(--text-muted, #94a3b8);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.protects-badge-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.protects-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.protects-modal-actions-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.protects-modal-actions-sub .btn {
    min-width: 140px;
    justify-content: center;
}

.btn-protects-skip-action {
    width: 100%;
    max-width: 440px;
    justify-content: center;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-protects-skip-action:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════
   Pre-Uninstall App Review Modal
   ══════════════════════════════════════════════════ */
.uninstall-review-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 16px;
    animation: modalFadeIn 0.2s ease-out;
}

.uninstall-review-card {
    max-width: 600px;
    width: 100%;
    max-height: 88vh;
    background: var(--bg-secondary, #16181f);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(239, 68, 68, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: reviewCardZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes reviewCardZoomIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.uninstall-review-header {
    padding: 18px 22px 14px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.uninstall-review-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uninstall-review-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.uninstall-review-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 3px 0;
}

.uninstall-review-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.35;
    margin: 0;
}

.uninstall-review-btn-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s ease;
}

.uninstall-review-btn-close:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.08);
}

.uninstall-review-search-bar {
    padding: 10px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.uninstall-review-search-input {
    width: 100%;
    padding: 7px 12px;
    font-size: 0.82rem;
    background: var(--bg-input, #121318);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    color: var(--text-primary, #f1f5f9);
    outline: none;
    transition: border-color 0.15s ease;
}

.uninstall-review-search-input:focus {
    border-color: var(--accent, #6366f1);
}

.uninstall-review-body {
    padding: 12px 22px;
    height: auto;
    max-height: 380px;
    min-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 68, 68, 0.35) rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (orientation: portrait), (min-height: 950px) {
    .uninstall-review-body {
        max-height: calc(88vh - 220px);
    }
}

.uninstall-review-body::-webkit-scrollbar {
    width: 6px;
}

.uninstall-review-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.uninstall-review-body::-webkit-scrollbar-thumb {
    background: rgba(239, 68, 68, 0.35);
    border-radius: 3px;
}

.uninstall-review-app-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.uninstall-review-app-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.uninstall-review-app-row.is-removing {
    opacity: 0;
    transform: translateX(16px);
    pointer-events: none;
}

.uninstall-review-app-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.uninstall-review-app-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.uninstall-review-app-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uninstall-review-app-pkg {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uninstall-review-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.uninstall-review-badge.badge-virus {
    color: #f87171;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
}

.uninstall-review-badge.badge-general {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.uninstall-review-btn-exclude {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.uninstall-review-btn-exclude:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
}

.uninstall-review-empty-state {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: 0.88rem;
}

.uninstall-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(0, 0, 0, 0.28);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 12px;
    flex-wrap: wrap;
}

.uninstall-review-summary-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uninstall-review-total-count {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
}

.uninstall-review-hint {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
}

.uninstall-review-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uninstall-review-btn-cancel {
    height: 36px;
    padding: 0 16px;
    font-size: 0.84rem;
    font-weight: 600;
}

.uninstall-review-btn-confirm {
    height: 36px;
    padding: 0 18px;
    font-size: 0.84rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.uninstall-review-btn-confirm:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.55);
    transform: translateY(-1px);
}

.uninstall-review-btn-confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* Light theme overrides */
[data-theme="light"] .uninstall-review-card {
    background: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .uninstall-review-app-row {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .uninstall-review-app-row:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] .uninstall-review-search-bar,
[data-theme="light"] .uninstall-review-footer {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* ADB Agent Status Button */
.btn-agent-ready {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #10b981 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-agent-ready:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.btn-agent-updating {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #f59e0b !important;
    font-weight: 600 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2) !important;
    cursor: wait !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: left !important;
    max-width: 100% !important;
    opacity: 1 !important;
    pointer-events: none;
}

.btn-agent-updating:disabled {
    opacity: 1 !important;
    cursor: wait !important;
}

/* ADB Agent Installed on Device (Not yet connected) */
.btn-agent-installed {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
    color: #60a5fa !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-agent-installed:hover {
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.7) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25) !important;
}

/* ADB Agent Outdated (Update available, idle state) */
.btn-agent-outdated {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    color: #fbbf24 !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-agent-outdated:hover {
    background: rgba(245, 158, 11, 0.22) !important;
    border-color: rgba(245, 158, 11, 0.7) !important;
    color: #fde68a !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25) !important;
}

/* ══════════════════════════════════════════════════
   System Rules Database Manager (Virus & Protects)
   ══════════════════════════════════════════════════ */
.btn-workspace-rules {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #c7d2fe;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.btn-workspace-rules:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.6);
    color: #e0e7ff;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.25);
    transform: translateY(-1px);
}

.rules-modal-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: calc(100vw - 32px);
    width: auto;
    height: auto;
    max-height: 92vh;
    position: relative;
}

.rules-modal-dialog {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1040px;
    width: 95vw;
    height: auto;
    max-height: 92vh;
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.12);
    border-radius: 16px;
    background: #11141c;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.rules-modal-wrapper.drawer-open-single .rules-modal-dialog,
.rules-modal-wrapper.drawer-open .rules-modal-dialog {
    max-width: 960px;
    width: calc(96vw - 410px);
}

.rules-modal-wrapper.drawer-open-dual .rules-modal-dialog {
    max-width: 880px;
    width: calc(98vw - 820px);
}

.rules-modal-header {
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rules-modal-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rules-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5b4fc;
    flex-shrink: 0;
}

.rules-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
    margin: 0;
}

.rules-modal-subtitle {
    margin: 3px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.35;
}

.rules-modal-header .btn-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.rules-modal-header .btn-modal-close:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    transform: scale(1.05);
}

.rules-top-bar {
    padding: 14px 24px 0;
}

.rules-modal-body {
    padding: 14px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.rules-unified-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.rules-unified-input-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
}

.rules-unified-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    color: var(--text-muted, #94a3b8);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.rules-input,
.rules-unified-input {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 40px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary, #f1f5f9);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.rules-unified-input::placeholder {
    color: var(--text-muted, #94a3b8);
    opacity: 0.85;
    font-size: 0.85rem;
    font-weight: 400;
}

.rules-unified-input:hover {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .rules-unified-input:hover {
    background: #f8fafc;
}

.rules-unified-input:focus {
    border-color: #6366f1;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .rules-unified-input:focus {
    background: #ffffff;
}

.rules-unified-clear-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.15s ease;
    z-index: 1;
}

.rules-unified-clear-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.12);
}

.rules-btn-add-dual {
    height: 42px;
    padding: 0 16px;
    white-space: nowrap;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: all 0.18s ease;
    box-sizing: border-box;
    cursor: pointer;
}

/* 💀 Virus Add Button: แดงโทนเทา (Slate Crimson / Muted Red-Grey) */
#btn-rules-add-virus,
.rules-btn-add-dual.btn-danger {
    background: linear-gradient(135deg, #85373d 0%, #63262a 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(225, 80, 90, 0.55) !important;
    box-shadow: 0 3px 10px rgba(110, 30, 36, 0.35);
}

#btn-rules-add-virus:hover:not(:disabled),
.rules-btn-add-dual.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #9b4047 0%, #752d32 100%) !important;
    border-color: rgba(245, 110, 120, 0.75) !important;
    box-shadow: 0 4px 14px rgba(140, 45, 52, 0.5);
    transform: translateY(-1px);
}

#btn-rules-add-virus:active:not(:disabled),
.rules-btn-add-dual.btn-danger:active:not(:disabled) {
    background: linear-gradient(135deg, #6b282d 0%, #521e22 100%) !important;
    transform: translateY(0);
}

#btn-rules-add-virus:disabled,
.rules-btn-add-dual.btn-danger:disabled {
    background: rgba(115, 45, 50, 0.32) !important;
    color: rgba(240, 200, 205, 0.52) !important;
    border: 1px solid rgba(160, 65, 72, 0.32) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.75;
    transform: none !important;
}

#btn-rules-add-virus.exists,
.rules-btn-add-dual.btn-danger.exists {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.7;
}

/* 🛡️ Protect Add Button: Emerald Green */
#btn-rules-add-protect,
.rules-btn-add-dual.btn-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3);
}

#btn-rules-add-protect:hover:not(:disabled),
.rules-btn-add-dual.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(52, 211, 153, 0.75) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.45);
    transform: translateY(-1px);
}

#btn-rules-add-protect:active:not(:disabled),
.rules-btn-add-dual.btn-success:active:not(:disabled) {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
    transform: translateY(0);
}

#btn-rules-add-protect:disabled,
.rules-btn-add-dual.btn-success:disabled {
    background: rgba(16, 185, 129, 0.22) !important;
    color: rgba(180, 240, 210, 0.5) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.75;
    transform: none !important;
}

#btn-rules-add-protect.exists,
.rules-btn-add-dual.btn-success.exists {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.7;
}

.rules-btn-bulk {
    height: 42px;
    padding: 0 15px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .rules-unified-toolbar {
        flex-wrap: wrap;
    }

    .rules-unified-input-wrapper {
        min-width: 100%;
    }

    .rules-btn-add-dual,
    .rules-btn-bulk {
        flex: 1;
        justify-content: center;
    }
}

.rules-empty-state-box {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rules-empty-state-icon {
    font-size: 1.8rem;
}

.rules-btn-add-quick {
    margin-top: 6px;
    font-size: 0.8rem;
    padding: 6px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

/* 💀 Virus Column Quick Add: แดงโทนเทา (Slate Crimson) */
.rules-col-virus .rules-btn-add-quick,
.rules-btn-add-quick[data-source="virus"],
.rules-btn-add-quick.btn-danger {
    background: linear-gradient(135deg, #85373d 0%, #63262a 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(225, 80, 90, 0.55) !important;
    box-shadow: 0 3px 10px rgba(110, 30, 36, 0.35);
}

.rules-col-virus .rules-btn-add-quick:hover:not(:disabled),
.rules-btn-add-quick[data-source="virus"]:hover:not(:disabled),
.rules-btn-add-quick.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #9b4047 0%, #752d32 100%) !important;
    border-color: rgba(245, 110, 120, 0.75) !important;
    box-shadow: 0 4px 14px rgba(140, 45, 52, 0.5);
    transform: translateY(-1px);
}

/* 🛡️ Protect Column Quick Add: Emerald Green */
.rules-col-protect .rules-btn-add-quick,
.rules-btn-add-quick[data-source="protect"],
.rules-btn-add-quick.btn-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3);
}

.rules-col-protect .rules-btn-add-quick:hover:not(:disabled),
.rules-btn-add-quick[data-source="protect"]:hover:not(:disabled),
.rules-btn-add-quick.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(52, 211, 153, 0.75) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.45);
    transform: translateY(-1px);
}

.rules-bulk-container {
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rules-bulk-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.rules-textarea {
    width: 100%;
    font-family: monospace;
    font-size: 0.8rem;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    resize: vertical;
    outline: none;
}

.rules-textarea:focus {
    border-color: var(--accent);
}

.rules-bulk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

#btn-rules-bulk-virus {
    background: linear-gradient(135deg, #85373d 0%, #63262a 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(225, 80, 90, 0.55) !important;
    box-shadow: 0 3px 10px rgba(110, 30, 36, 0.35);
    font-weight: 600;
}

#btn-rules-bulk-virus:hover:not(:disabled) {
    background: linear-gradient(135deg, #9b4047 0%, #752d32 100%) !important;
    border-color: rgba(245, 110, 120, 0.75) !important;
    box-shadow: 0 4px 14px rgba(140, 45, 52, 0.5);
    transform: translateY(-1px);
}

#btn-rules-bulk-protect {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3);
    font-weight: 600;
}

#btn-rules-bulk-protect:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(52, 211, 153, 0.75) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.45);
    transform: translateY(-1px);
}

/* 2-Column Split Workspace with Center Transfer Actions */
.rules-columns-wrapper {
    display: grid;
    grid-template-columns: 1fr 148px 1fr;
    gap: 12px;
    align-items: stretch;
    min-height: 240px;
}

@media (max-width: 860px) {
    .rules-columns-wrapper {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.rules-column {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    transition: all 0.2s ease;
}

.rules-col-virus {
    border-top: 3px solid rgba(239, 68, 68, 0.75);
}

.rules-col-protect {
    border-top: 3px solid rgba(16, 185, 129, 0.75);
}

.rules-col-header {
    display: flex;
    flex-direction: column;
    padding: 10px 14px 9px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 7px;
}

.rules-col-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rules-col-icon {
    font-size: 1.15rem;
}

.rules-col-title {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 700;
}

.rules-col-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.rules-col-badge.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.rules-col-badge.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.rules-col-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rules-sel-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: left;
}

.rules-sort-pills {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.rules-sort-pill {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.rules-sort-pill:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.rules-sort-pill.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.apps-sort-pills {
    margin-left: 0;
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 2px;
}

.apps-sort-pills .rules-sort-pill {
    padding: 0 10px;
    height: 28px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.rules-column .rules-packages-list {
    flex: 1;
    height: auto;
    max-height: 50vh;
    min-height: 160px;
    overflow-y: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

@media (orientation: portrait), (min-height: 950px) {
    .rules-modal-wrapper {
        max-height: 94vh;
    }

    .rules-modal-dialog {
        max-height: 94vh;
    }

    .rules-column .rules-packages-list {
        max-height: calc(94vh - 270px);
    }
}

/* Center Transfer Controls */
.rules-center-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 2px;
}

.rules-center-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.rules-center-btn {
    width: 100%;
    padding: 9px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

#btn-rules-move-to-protect:not(:disabled) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.35);
}

#btn-rules-move-to-protect:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(52, 211, 153, 0.75) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.5);
    transform: translateY(-1px);
}

#btn-rules-move-to-virus.btn-danger:not(:disabled) {
    background: linear-gradient(135deg, #85373d 0%, #63262a 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(225, 80, 90, 0.55) !important;
    box-shadow: 0 3px 10px rgba(110, 30, 36, 0.35);
}

#btn-rules-move-to-virus.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #9b4047 0%, #752d32 100%) !important;
    border-color: rgba(245, 110, 120, 0.75) !important;
    box-shadow: 0 4px 14px rgba(140, 45, 52, 0.5);
    transform: translateY(-1px);
}

.rules-center-btn:disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    opacity: 0.6;
    cursor: not-allowed;
}

.rules-center-btn-del:disabled {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    opacity: 0.5;
    cursor: not-allowed;
}

#btn-rules-move-to-virus:disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    opacity: 0.6;
}

.rules-arrow-icon {
    font-size: 0.8rem;
}

.rules-center-sub-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.rules-center-btn-del {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.rules-center-divider {
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

@media (max-width: 860px) {
    .rules-center-actions {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }

    .rules-center-group {
        width: 48%;
    }

    .rules-center-divider {
        display: none;
    }
}

.rules-chk {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.rules-btn-cancel-del {
    padding: 4px 8px;
    font-size: 0.74rem;
}

/* Inline Move Keyword Confirmation Box */
.rules-move-confirm-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid rgba(245, 158, 11, 0.85);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 12px;
    box-sizing: border-box;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
    animation: rulesAlertPulseAmber 0.55s infinite ease-in-out;
}

.rules-move-confirm-box.to-virus {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.85);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
    animation: rulesAlertPulseRed 0.55s infinite ease-in-out;
}

@keyframes rulesAlertPulseAmber {

    0%,
    100% {
        border-color: rgba(245, 158, 11, 0.95);
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 0 18px rgba(245, 158, 11, 0.45);
        background: rgba(245, 158, 11, 0.14);
    }

    50% {
        border-color: rgba(245, 158, 11, 0.25);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 4px rgba(245, 158, 11, 0.08);
        background: rgba(245, 158, 11, 0.03);
    }
}

@keyframes rulesAlertPulseRed {

    0%,
    100% {
        border-color: rgba(239, 68, 68, 0.95);
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.55);
        background: rgba(239, 68, 68, 0.16);
    }

    50% {
        border-color: rgba(239, 68, 68, 0.25);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 0 4px rgba(239, 68, 68, 0.08);
        background: rgba(239, 68, 68, 0.03);
    }
}

.rules-move-confirm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

.rules-move-confirm-header code {
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.45);
    letter-spacing: 0.3px;
}

.rules-move-confirm-box.to-virus .rules-move-confirm-header code {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
}

.rules-move-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.rules-move-keyword-input {
    min-width: 220px;
    max-width: 320px;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.rules-move-keyword-input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
    outline: none;
}

.rules-move-confirm-box.to-virus .rules-move-keyword-input:focus {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
    outline: none;
}

.rules-move-keyword-error {
    font-size: 0.78rem;
    color: #f87171;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.rules-pkg-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.81rem;
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.rules-pkg-item.selected {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.45);
}

.rules-pkg-item:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
}

.rules-pkg-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.rules-pkg-index {
    color: var(--text-muted);
    font-size: 0.72rem;
    width: 24px;
    text-align: right;
    font-family: monospace;
    flex-shrink: 0;
}

.rules-pkg-icon-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.rules-pkg-icon-wrapper.can-recheck {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.rules-pkg-icon-wrapper.can-recheck:hover {
    transform: scale(1.1);
    filter: brightness(1.25);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.rules-pkg-icon-wrapper.is-checking {
    pointer-events: none;
    opacity: 0.75;
}

.rules-pkg-ttl-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(15, 15, 25, 0.92);
    color: #94a3b8;
    font-size: 0.54rem;
    font-weight: 700;
    padding: 0 2px;
    border-top-left-radius: 3px;
    line-height: 1.1;
    pointer-events: none;
    letter-spacing: -0.2px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.rules-inline-spinner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-rules 0.7s linear infinite;
    z-index: 2;
}

@keyframes spin-rules {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pulse-not-found {
    animation: flash-red 0.5s ease-out;
}

@keyframes flash-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.35);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.rules-pkg-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rules-pkg-icon-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    border-radius: 6px;
}

.rules-pkg-icon-fallback.virus {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.rules-pkg-icon-fallback.protect {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.rules-pkg-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: center;
    gap: 1px;
}

.rules-pkg-appname {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.rules-pkg-name.sub {
    font-family: monospace;
    font-size: 0.71rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.rules-pkg-name.main {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.rules-pkg-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.rules-btn-del {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    transition: all 0.15s ease;
}

.rules-btn-del:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.rules-modal-footer {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.rules-footer-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.rules-footer-right {
    display: flex;
    gap: 8px;
}

#summary-rules-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.4);
    font-weight: 600;
}

#btn-summary-rules,
#btn-connect-rules,
#btn-adb-connect-rules {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#btn-summary-rules:hover,
#btn-connect-rules:hover,
#btn-adb-connect-rules:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

.fade-in-icon {
    animation: rulesIconFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rulesIconFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ─── Side-by-Side Slidebar Play Store Drawer for Rules DB (Outside Modal Dialog) ─── */
.rules-ps-drawer {
    width: 0;
    margin: 0;
    height: 100%;
    max-height: 90vh;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: #11141c;
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, width;
    z-index: 100;
}

.rules-ps-drawer.active {
    width: 390px;
    opacity: 1;
    pointer-events: auto;
}

/* Left side (Virus.txt): appears on the LEFT of modal dialog without covering it */
.rules-ps-drawer-left,
.rules-ps-drawer.slide-left {
    order: -1;
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: -14px 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(239, 68, 68, 0.15);
    transform: translateX(-20px);
}

.rules-ps-drawer-left.active,
.rules-ps-drawer.slide-left.active {
    transform: translateX(0);
    margin-right: 14px;
}

/* Right side (Protects.txt): appears on the RIGHT of modal dialog without covering it */
.rules-ps-drawer-right,
.rules-ps-drawer.slide-right {
    order: 1;
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 14px 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(16, 185, 129, 0.15);
    transform: translateX(20px);
}

.rules-ps-drawer-right.active,
.rules-ps-drawer.slide-right.active {
    transform: translateX(0);
    margin-left: 14px;
}

.rules-ps-drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.rules-ps-drawer-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rules-ps-drawer-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
}

.rules-ps-source-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.rules-ps-source-badge.virus {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.rules-ps-source-badge.protect {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.rules-ps-drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rules-ps-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rules-pkg-item.item-rules-inspecting {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.14) !important;
    box-shadow: inset 0 0 0 1px #6366f1, 0 0 8px rgba(99, 102, 241, 0.25);
}

.rules-btn-info {
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.rules-btn-info:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.16);
    transform: scale(1.1);
}

.rules-btn-info.active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.22);
}

.rules-ps-quick-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.rules-ps-action-row {
    display: flex;
    gap: 8px;
}

.rules-ps-action-row .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .rules-modal-wrapper {
        flex-direction: column;
        align-items: center;
        max-width: 96vw;
        height: 94vh;
        max-height: 94vh;
        overflow-y: auto;
    }

    .rules-modal-wrapper.drawer-open .rules-modal-dialog {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 480px;
    }

    .rules-ps-drawer.active {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 400px;
        order: 2 !important;
        transform: translateY(0) !important;
    }
}

/* ══════════════════════════════════════════════════
   Play Protect Certification Fixer Modal Styles
   ══════════════════════════════════════════════════ */
.play-protect-modal-dialog {
    max-width: 820px;
    width: 95vw;
    max-height: 90vh;
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.18);
    border-radius: 14px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.play-protect-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.play-protect-header-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.play-protect-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.play-protect-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.play-protect-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-advance-content.play-protect-expanded { max-width: 1220px; }
.play-protect-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr); gap: 14px; align-items: start; }
.play-protect-steps { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.play-protect-mirror-panel { position: relative; min-width: 0; min-height: 450px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #0d1117; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.play-protect-mirror-panel.hidden { display: none; }
.play-protect-reboot-overlay { position: absolute; inset: 38px 12px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 20px; border-radius: 8px; background: rgba(8,11,16,.72); backdrop-filter: blur(16px); color: #f1f5f9; z-index: 2; }
.play-protect-reboot-overlay img { width: 72px; height: 72px; }
.play-protect-reboot-overlay .play-protect-retry { margin: 0; align-self: center; }
.play-protect-mirror-header { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 0.86rem; }
.play-protect-mirror-header span { color: var(--text-secondary); font-size: 0.77rem; }
#play-protect-mirror-canvas { display: block; max-width: 100%; max-height: calc(100% - 32px); width: auto; height: auto; min-height: 0; background: #080b10; border-radius: 8px; touch-action: none; }
.play-protect-modal-body.is-running { overflow: hidden !important; min-height: 0; }
.play-protect-modal-body.is-running .play-protect-workspace { flex: 1; min-height: 0; align-items: stretch; }
.play-protect-modal-body.is-running .play-protect-steps { min-height: 0; overflow-y: auto; }
.play-protect-modal-body.is-running .play-protect-mirror-panel { box-sizing: border-box; height: 100%; min-height: 0; overflow: hidden; }
.play-protect-step-list { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; width: 100%; }
.play-protect-step-row { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 6px; background: rgba(255,255,255,0.035); font-size: 0.78rem; }
.play-protect-step-row code { color: #a5b4fc; min-width: 52px; }
.play-protect-step-row .step-status { margin-left: auto; color: var(--text-secondary); }
.play-protect-step-row[data-status="done"] .step-status { color: #34d399; }
.play-protect-step-row[data-status="failed"] .step-status { color: #f87171; }
.play-protect-step-row[data-status="running"] .step-status { color: #a5b4fc; }
@media (max-width: 900px) { .play-protect-workspace { grid-template-columns: 1fr; } .play-protect-mirror-panel { min-height: 280px; } .play-protect-modal-body.is-running { overflow-y: auto !important; } .play-protect-modal-body.is-running .play-protect-workspace { flex: none; } .play-protect-modal-body.is-running .play-protect-mirror-panel { height: min(60vh, 540px); } }

/* 🛑 Critical Safety Banner */
.play-protect-safety-banner {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.1);
}

.play-protect-safety-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-size: 0.95rem;
}

.play-protect-safety-content {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary, #d1d5db);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.play-protect-safety-content p {
    margin: 0;
}

.safety-danger-text {
    color: #e2e8f0 !important;
    font-weight: 500;
    line-height: 1.55;
}

.play-protect-consent-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fbbf24;
    cursor: pointer;
    background: rgba(245, 158, 11, 0.12);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed rgba(245, 158, 11, 0.4);
    user-select: none;
    transition: all 0.2s ease;
}

.play-protect-consent-label:hover {
    background: rgba(245, 158, 11, 0.18);
}

.play-protect-consent-chk {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #f59e0b;
}

.play-protect-consent-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.btn-play-protect-consent-btn {
    background: #f59e0b;
    color: #0f172a;
    font-weight: 700;
    width: auto;
    padding: 8px 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
    transition: all 0.2s ease;
}

.btn-play-protect-consent-btn:hover {
    background: #d97706;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

.btn-play-protect-consent-btn:active {
    transform: translateY(0);
}

/* 📊 Pre-Check Diagnostics Card */
.play-protect-diag-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.play-protect-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.92rem;
    color: var(--text-primary);
    padding-bottom: 2px;
}

/* ─── Sleek Diagnostics Progress Bar & Result Panels ─── */
.diag-status-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.diag-progress-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.diag-progress-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.diag-progress-text {
    flex: 1;
}

.diag-progress-percent {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    color: var(--accent-color, #6366f1);
    font-weight: 600;
}

.diag-progress-track {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.diag-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #38bdf8);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.diag-result-panel {
    display: flex;
    flex-direction: column;
}

.diag-result-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    animation: fadeIn 0.25s ease;
}

.diag-result-box.diag-result-ok {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #a7f3d0;
}

.diag-result-box.diag-result-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.diag-result-box.diag-result-error {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde68a;
}

.diag-result-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.diag-result-icon {
    font-size: 1.15rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.diag-result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.diag-result-title {
    font-size: 0.86rem;
    color: var(--text-primary);
}

.diag-result-summary {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.diag-abnormal-items {
    margin: 4px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fca5a5;
    font-size: 0.78rem;
}

.diag-result-rec {
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-primary);
}

/* ─── Play Protect 3-State Pipeline Animation (Left to Right) ───────── */
.play-protect-flow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 12px;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
}

.play-protect-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    position: relative;
    padding: 4px 0;
}

.pipeline-node {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 700;
    z-index: 2;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(30, 41, 59, 0.9);
    border: 2px solid rgba(148, 163, 184, 0.3);
    color: var(--text-secondary);
}

.pipeline-node.active {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
    animation: pipelineNodePulse 1.4s infinite;
}

.pipeline-node.done {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
    transform: scale(1.05);
}

.pipeline-node.partial {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    box-shadow: none;
    animation: none;
}

.pipeline-node.target-ready {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(6, 182, 212, 0.3));
    color: #ffffff;
    font-size: 1.15rem;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
    animation: pipelineTargetPulse 1.6s infinite;
}

.pipeline-track {
    flex: 1;
    height: 4px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin: 0 8px;
    z-index: 1;
}

.pipeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #34d399, #38bdf8);
    box-shadow: 0 0 8px #34d399;
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pipeline-fill.filled {
    width: 100%;
}

.pipeline-fill.flowing {
    background-size: 200% 100%;
    animation: pipelineFlowGradient 1.2s linear infinite;
}

@keyframes pipelineNodePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); }
    50% { transform: scale(1.14); box-shadow: 0 0 16px rgba(56, 189, 248, 0.65); }
}

@keyframes pipelineTargetPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(16, 185, 129, 0.45); }
    50% { transform: scale(1.18); box-shadow: 0 0 22px rgba(16, 185, 129, 0.85), 0 0 32px rgba(6, 182, 212, 0.45); }
}

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

.play-protect-flow-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    font-size: 0.84rem;
    font-weight: 500;
    color: #f1f5f9;
    background: rgba(16, 185, 129, 0.15);
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    animation: fadeInHint 0.4s ease-out;
}

.play-protect-flow-hint.manual { flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1.5; }
.play-protect-flow-hint.manual .manual-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.play-protect-retry { margin-left: auto; align-self: flex-end; padding: 7px 14px; border: 0; border-radius: 8px; background: #f59e0b; color: #0f172a; font: inherit; font-weight: 700; cursor: pointer; }

@keyframes fadeInHint {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Recommended action card highlight */
.play-protect-action-card.card-recommended {
    border-color: #6366f1 !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.25);
    position: relative;
}

.play-protect-action-card.card-recommended::before {
    content: '⭐ แนะนำสำหรับเครื่องนี้';
    position: absolute;
    top: -10px;
    right: 14px;
    background: #6366f1;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.play-protect-action-card {
    background: var(--bg-tertiary, #1a1a28);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.play-protect-action-card.card-gsf {
    border-color: rgba(99, 102, 241, 0.3);
}

/* Capabilities comparison box (What works vs limitations) */
.gsf-capabilities-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 6px 0 10px;
    font-size: 0.76rem;
}

.gsf-cap-col {
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gsf-cap-pros {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #a7f3d0;
}

.gsf-cap-cons {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.gsf-cap-title {
    font-size: 0.78rem;
    font-weight: 700;
}

.gsf-cap-pros .gsf-cap-title {
    color: #34d399;
}

.gsf-cap-cons .gsf-cap-title {
    color: #f87171;
}

.gsf-cap-col ul {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

@media (max-width: 680px) {
    .gsf-capabilities-box {
        grid-template-columns: 1fr;
    }
}

.action-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
    text-transform: uppercase;
}

.action-badge.badge-stock {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.action-badge.badge-gsf {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.action-card-header h4 {
    margin: 0;
    font-size: 0.96rem;
    color: var(--text-primary);
}

.action-card-header p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.action-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.action-steps-mini {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.76rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-steps-mini code {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 4px;
    border-radius: 4px;
    color: #93c5fd;
    font-size: 0.72rem;
}

.gsf-box-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gsf-box-wrapper label {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.gsf-input-row {
    display: flex;
    gap: 6px;
}

.gsf-input {
    font-family: monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #38bdf8 !important;
    font-weight: 600;
}

.gsf-steps-guide {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.action-card-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.disabled-link {
    pointer-events: none !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.play-protect-modal-footer {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
}

.play-protect-footer-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .play-protect-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════
   YouTube-style Smart App Banner (Mobile Web)
   ══════════════════════════════════════════════════════ */
.mobile-app-banner {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 9px 14px;
    background: rgba(18, 20, 26, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: bannerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bannerSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

.mobile-app-banner.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-app-banner:not(.hidden) {
        display: flex;
    }
}

.banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.banner-close-btn {
    background: none;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 0.95rem;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banner-close-btn:hover {
    color: var(--text, #f8fafc);
}

.banner-logo {
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.banner-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.banner-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text, #f8fafc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-banner-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff !important;
    border: none;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-banner-open:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.btn-banner-open:active {
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   Open in App Button (mobile.html)
   ══════════════════════════════════════════════════════ */
.open-in-app-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff !important;
    border: none;
    border-radius: var(--radius-lg, 14px);
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
    transition: all var(--transition, 0.2s ease);
    margin-bottom: 12px;
    cursor: pointer;
}

.open-in-app-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.55);
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.open-in-app-btn:active {
    transform: translateY(0);
}

.open-in-app-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    flex-shrink: 0;
}

.open-in-app-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    flex: 1;
}

.open-in-app-main {
    font-size: 1.05rem;
    font-weight: 700;
}

.open-in-app-sub {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.open-in-app-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.open-in-app-btn:hover .open-in-app-arrow {
    transform: translateX(4px);
}

.download-btn.download-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text, #f8fafc) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
    margin-bottom: 24px;
}

.download-btn.download-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ══════════════════════════════════════════════════
   Advance Tools & Security Center Modal
   ══════════════════════════════════════════════════ */
.advance-icon {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.25s ease;
}

#btn-advance-mode:hover .advance-icon {
    transform: rotate(45deg);
}

.modal-advance-content {
    max-width: 960px;
    width: 95vw;
    height: 85vh;
    min-height: 540px;
    max-height: 90vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #11141c;
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.12);
}

.modal-advance-content .modal-header {
    padding: 24px 26px 18px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.advance-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.advance-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.advance-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5b4fc;
    flex-shrink: 0;
}

#advance-hub-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
}

.advance-modal-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
    margin: 3px 0 0 0;
    line-height: 1.35;
}

.advance-tabs-nav {
    display: flex;
    gap: 8px;
    padding: 0 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.advance-tab-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.advance-tab-btn:hover:not(.disabled) {
    color: #e2e8f0;
}

.advance-tab-btn.active {
    color: #818cf8;
    border-bottom-color: #818cf8;
    background: rgba(99, 102, 241, 0.06);
}

.advance-tab-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.advance-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, 0.35);
    margin-left: 6px;
}

.advance-btn-close-modal {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.advance-btn-close-modal:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    transform: scale(1.05);
}

.advance-vault-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.advance-vault-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
}

.advance-vault-stats strong {
    color: #818cf8;
    font-weight: 700;
}

.advance-vault-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}

.advance-vault-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.2s ease;
}

.advance-vault-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(15, 23, 42, 0.75);
}

.advance-vault-app-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.advance-vault-app-info img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.advance-vault-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.advance-vault-app-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary, #f1f5f9);
}

.advance-vault-pkg {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.advance-vault-key-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.advance-vault-key-badge.multiple {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.advance-vault-keys-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.advance-vault-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: monospace;
}

.advance-vault-key-label {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
}

.advance-vault-sha-short {
    font-size: 0.78rem;
    color: #38bdf8;
    font-weight: 600;
    letter-spacing: 0.5px;
    user-select: text;
}

.advance-vault-btn-del {
    padding: 3px 8px;
    font-size: 0.72rem;
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.advance-vault-btn-del:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

.advance-vault-btn-del.confirm {
    background: #ef4444;
    color: #fff;
    font-weight: 600;
}

.advance-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 18px 24px;
}

.advance-tab-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 14px;
    overflow: hidden;
    animation: fadeIn 0.18s ease;
}

.advance-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.advance-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.advance-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.6;
}

.advance-search-wrap input,
.advance-search-input {
    padding-left: 32px;
    padding-right: 12px;
    height: 34px;
    width: 100%;
    background: var(--bg-input, #1e293b) !important;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary, #f1f5f9) !important;
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.advance-search-wrap input:focus,
.advance-search-input:focus {
    border-color: var(--accent, #6366f1) !important;
    box-shadow: 0 0 0 2px var(--accent-glow, rgba(99, 102, 241, 0.25));
}

.advance-batch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.advance-counter-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.15);
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.advance-workspace-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    flex: 1;
    min-height: 420px;
    overflow: hidden;
}

@media (max-width: 800px) {
    .advance-workspace-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 240px 1fr;
    }
}

.advance-apps-panel,
.advance-results-panel {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.advance-panel-header {
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-height: 48px;
}

.advance-panel-header-row1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.advance-apps-panel-header {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

.advance-apps-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.advance-btn-toggle-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.advance-select-all-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--accent, #6366f1);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.advance-apps-total-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

.advance-apps-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.advance-app-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.advance-app-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.advance-app-item.selected {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
}

.advance-app-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary, #6366f1);
}

.advance-app-item img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

.advance-app-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.advance-app-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.advance-app-title {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #f1f5f9);
    flex: 1;
    min-width: 0;
}

.advance-app-pkg {
    font-size: 0.7rem;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

/* Results Section */
.advance-results-panel {
    position: relative;
}

.advance-status-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.advance-status-tag.idle {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.advance-status-tag.inspecting {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.advance-status-tag.completed {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.advance-empty-state,
.advance-loading-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
}

.advance-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.7;
}

.advance-empty-state h4 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: #f1f5f9;
}

.advance-btn-run-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 9px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: all 0.2s ease;
    margin: 4px 0 10px 0;
}

.advance-btn-run-center:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.5);
    transform: translateY(-1px);
}

.advance-btn-run-center:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    background: #334155;
    border-color: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}

body.light-theme .advance-btn-run-center:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
}

.advance-empty-state p,
.advance-empty-subtext {
    font-size: 0.85rem;
    max-width: 420px;
    margin: 0;
    line-height: 1.45;
    color: var(--text-muted, #94a3b8);
}

.advance-results-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advance-results-summary-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.advance-stat-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.advance-stat-badge.official {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.advance-stat-badge.debug {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.advance-stat-badge.commercial {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.advance-results-cards-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}

.advance-result-card {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease;
}

.advance-result-card.verdict-official {
    border-left: 4px solid #10b981;
}

.advance-result-card.verdict-debug {
    border-left: 4px solid #ef4444;
    background: rgba(69, 10, 10, 0.25);
}

.advance-result-card.verdict-commercial {
    border-left: 4px solid #3b82f6;
}

.advance-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.advance-card-app-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.advance-card-app-info img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}

.advance-card-title-col {
    display: flex;
    flex-direction: column;
}

.advance-card-app-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f8fafc;
}

.advance-card-pkg {
    font-size: 0.74rem;
    font-family: monospace;
    color: var(--text-muted, #94a3b8);
}

.advance-card-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.advance-card-badge.badge-official {
    background: #064e3b;
    color: #6ee7b7;
    border: 1px solid #059669;
}

.advance-card-badge.badge-debug {
    background: #7f1d1d;
    color: #fca5a5;
    border: 1px solid #dc2626;
    animation: pulse 2s infinite;
}

.advance-card-badge.badge-commercial {
    background: #1e3a8a;
    color: #93c5fd;
    border: 1px solid #2563eb;
}

.advance-card-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.advance-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.advance-detail-label {
    font-size: 0.68rem;
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
}

.advance-detail-val {
    color: #e2e8f0;
    font-family: monospace;
    word-break: break-all;
}

.advance-sha256-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.advance-sha256-text {
    flex: 1;
    font-family: monospace;
    font-size: 0.72rem;
    color: #94a3b8;
    word-break: break-all;
    line-height: 1.3;
}

.advance-btn-copy-sha {
    padding: 3px 8px;
    font-size: 0.72rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.advance-btn-copy-sha:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.advance-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.advance-btn-skull {
    background: linear-gradient(135deg, #85373d 0%, #63262a 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(225, 80, 90, 0.55) !important;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
}

.advance-btn-skull:hover:not(:disabled) {
    background: linear-gradient(135deg, #9b4047 0%, #752d32 100%) !important;
    border-color: rgba(245, 110, 120, 0.75) !important;
    transform: translateY(-1px);
}

.advance-btn-skull.confirm-step {
    background: #ea580c !important;
    border: 1px solid #f97316 !important;
    color: #ffffff !important;
}

.advance-btn-skull.is-uninstalled {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #9ca3af !important;
    cursor: default !important;
    opacity: 0.85;
}

.advance-btn-uninstall {
    background: #ef4444;
    color: #ffffff;
    border: none;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
}

.advance-btn-uninstall:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

.advance-btn-uninstall.confirm-step {
    background: #ea580c;
    border: 1px solid #f97316;
}

.advance-btn-uninstall.is-uninstalled {
    background: #059669 !important;
    border: 1px solid #10b981 !important;
    cursor: default !important;
    opacity: 0.85;
}

.advance-card-uninstalled {
    opacity: 0.65;
    border-left: 4px solid #10b981 !important;
}

.advance-tag-virus,
.advance-tag-protect {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.advance-tag-virus {
    background: rgba(220, 38, 38, 0.25);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.4);
}

.advance-tag-protect {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

/* Advance Results Toolbar (Batch Protect SHA) */
.advance-results-toolbar-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 12px;
    border-radius: 8px;
    flex-wrap: wrap;
}

.advance-results-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.advance-btn-batch-protect {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.advance-btn-batch-protect:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.advance-btn-batch-protect:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Complete Notification Overlay with Full Panel Backdrop Blur (Auto-dismisses in ~3s) */
.advance-complete-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: rgba(10, 15, 29, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: advanceOverlayFadeIn 0.25s ease-out forwards;
}

.advance-complete-overlay.overlay-fade-out {
    animation: advanceOverlayFadeOut 0.35s ease forwards;
    pointer-events: none;
}

.advance-complete-card {
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid rgba(16, 185, 129, 0.6);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.75), 0 0 25px rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 24px 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 440px;
    animation: advanceCardPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.advance-complete-icon-box {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
}

.advance-complete-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: -0.01em;
}

.advance-complete-subtitle {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
}

@keyframes advanceOverlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes advanceOverlayFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes advanceCardPopIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }

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

/* Card Button: Save SHA to Protects */
.advance-btn-protect-sha {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
}

.advance-btn-protect-sha:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.32);
    color: #ffffff;
    border-color: #10b981;
    transform: translateY(-1px);
}

.advance-btn-protect-sha.is-saved {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
    cursor: default !important;
    pointer-events: none;
}

/* Card Header Left & Card Checkbox */
.advance-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.advance-card-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--accent, #6366f1);
    cursor: pointer;
    flex-shrink: 0;
}

/* Imposter (Spoofed) Verdict & Verified Protects Card Styles */
.advance-result-card.verdict-imposter {
    border-left: 5px solid #ef4444 !important;
    background: rgba(127, 29, 29, 0.28) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.22);
}

.advance-card-badge.badge-imposter {
    background: #991b1b !important;
    color: #fee2e2 !important;
    border: 1px solid #ef4444 !important;
    font-weight: 800;
    animation: pulse 1.5s infinite;
}

.advance-imposter-alert-banner {
    background: rgba(220, 38, 38, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fca5a5;
    font-size: 0.76rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 2px;
}

.advance-result-card.verdict-verified-protect {
    border-left: 4px solid #10b981 !important;
    background: rgba(6, 78, 59, 0.22) !important;
}

.advance-card-badge.badge-verified-protect {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border: 1px solid #059669 !important;
}

.advance-stat-badge.imposter {
    background: rgba(220, 38, 38, 0.25);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.5);
    animation: pulse 1.5s infinite;
}

/* Progress Center & Live Progress Bar */
.advance-progress-card {
    width: 100%;
    max-width: 460px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    animation: fadeIn 0.25s ease;
}

.advance-progress-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
}

.advance-progress-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.advance-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #38bdf8);
    border-radius: 999px;
    width: 0%;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.7);
}

.advance-progress-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}

.advance-progress-pkg {
    font-family: monospace;
    color: #a5b4fc;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.advance-progress-pulse-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    color: var(--text-muted, #94a3b8);
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.advance-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: pulse 1.5s infinite;
}

.advance-stuck-box {
    margin-top: 14px;
    width: 100%;
    max-width: 460px;
    background: rgba(234, 88, 12, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeIn 0.3s ease;
}

.advance-stuck-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.advance-stuck-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.advance-stuck-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fb923c;
}

.advance-stuck-desc {
    font-size: 0.72rem;
    color: #fdba74;
    line-height: 1.3;
}

.advance-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.advance-footer-tip {
    font-size: 0.74rem;
    color: var(--text-muted, #94a3b8);
}

/* ══════════════════════════════════════════════════
   Advance Tools Light Theme Overrides
   ══════════════════════════════════════════════════ */
[data-theme="light"] .modal-advance-content {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

[data-theme="light"] .advance-title-icon {
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
    color: #4f46e5 !important;
}

[data-theme="light"] .advance-tabs-nav {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-tab-btn {
    color: #64748b !important;
}

[data-theme="light"] .advance-tab-btn:hover:not(.disabled) {
    color: #1e293b !important;
}

[data-theme="light"] .advance-tab-btn.active {
    color: #4f46e5 !important;
    border-bottom-color: #4f46e5 !important;
    background: #eef2ff !important;
}

[data-theme="light"] .advance-control-bar {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-search-wrap input,
[data-theme="light"] .advance-search-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .advance-apps-panel,
[data-theme="light"] .advance-results-panel {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-panel-header {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .advance-app-item {
    background: transparent !important;
    border-color: transparent !important;
}

[data-theme="light"] .advance-app-item:hover {
    background: #e2e8f0 !important;
}

[data-theme="light"] .advance-app-item.selected {
    background: #e0e7ff !important;
    border-color: #818cf8 !important;
}

[data-theme="light"] .advance-app-title {
    color: #0f172a !important;
}

[data-theme="light"] .advance-app-pkg {
    color: #64748b !important;
}

[data-theme="light"] .advance-empty-state h4 {
    color: #0f172a !important;
}

[data-theme="light"] .advance-progress-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .advance-progress-header {
    color: #0f172a !important;
}

[data-theme="light"] .advance-progress-bar-track {
    background: #e2e8f0 !important;
}

[data-theme="light"] .advance-result-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .advance-card-app-name {
    color: #0f172a !important;
}

[data-theme="light"] .advance-card-details-grid {
    background: #f1f5f9 !important;
}

[data-theme="light"] .advance-detail-val {
    color: #0f172a !important;
}

[data-theme="light"] .advance-sha256-box {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-sha256-text {
    color: #475569 !important;
}

[data-theme="light"] .advance-btn-copy-sha {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .advance-btn-copy-sha:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .advance-modal-footer {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-results-toolbar-row {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .advance-complete-overlay {
    background: rgba(241, 245, 249, 0.65) !important;
}

[data-theme="light"] .advance-complete-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="light"] .advance-complete-title {
    color: #047857 !important;
}

[data-theme="light"] .advance-complete-subtitle {
    color: #64748b !important;
}

[data-theme="light"] .advance-results-select-all-label {
    color: #1e293b !important;
}

[data-theme="light"] .advance-btn-protect-sha {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="light"] .advance-btn-protect-sha:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #065f46 !important;
}

[data-theme="light"] .advance-result-card.verdict-imposter {
    background: #fff1f2 !important;
    border-color: #fda4af !important;
}

[data-theme="light"] .advance-imposter-alert-banner {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

[data-theme="light"] .advance-result-card.verdict-verified-protect {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

[data-theme="light"] .advance-btn-close-modal {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

[data-theme="light"] .advance-btn-close-modal:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}

[data-theme="light"] .advance-tab-badge {
    background: #e0e7ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}

[data-theme="light"] .advance-vault-toolbar {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-vault-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .advance-vault-card:hover {
    border-color: #a5b4fc !important;
    background: #fafafa !important;
}

[data-theme="light"] .advance-vault-app-name {
    color: #0f172a !important;
}

[data-theme="light"] .advance-vault-key-row {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .advance-vault-sha-short {
    color: #0284c7 !important;
}

/* ══════════════════════════════════════════════════
   Rules Database Modal Light Theme Overrides
   ══════════════════════════════════════════════════ */
[data-theme="light"] .rules-modal-dialog,
[data-theme="light"] .rules-ps-drawer {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

[data-theme="light"] .rules-modal-header,
[data-theme="light"] .rules-ps-drawer-header {
    border-bottom-color: #e2e8f0 !important;
    background: #ffffff !important;
}

[data-theme="light"] .rules-modal-icon {
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
    color: #4f46e5 !important;
}

[data-theme="light"] .rules-modal-title {
    color: #0f172a !important;
}

[data-theme="light"] .rules-modal-header .btn-modal-close,
[data-theme="light"] .rules-ps-drawer-header .btn-modal-close {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

[data-theme="light"] .rules-modal-header .btn-modal-close:hover,
[data-theme="light"] .rules-ps-drawer-header .btn-modal-close:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}

[data-theme="light"] .rules-unified-toolbar {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .rules-column {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .rules-col-header {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .rules-col-title {
    color: #0f172a !important;
}

[data-theme="light"] .rules-pkg-item {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .rules-pkg-item:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .rules-pkg-item.selected {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

[data-theme="light"] .rules-modal-footer {
    background: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════
   Advance Hub: AdActivity & Overlay Hunter Tab
   ══════════════════════════════════════════════════ */
.advance-ad-filter-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.advance-ad-filter-pill {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.advance-ad-filter-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.advance-ad-filter-pill.active {
    background: rgba(99, 102, 241, 0.25);
    border-color: #818cf8;
    color: #c7d2fe;
}

.advance-ad-filter-pill.pill-rogue.active {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fca5a5;
}

.advance-ad-filter-pill.pill-overlay.active {
    background: rgba(234, 179, 8, 0.25);
    border-color: #eab308;
    color: #fef08a;
}

.advance-ad-filter-pill.pill-inapp.active {
    background: rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
    color: #86efac;
}

.advance-ad-filter-pill.pill-clean.active {
    background: rgba(148, 163, 184, 0.25);
    border-color: #94a3b8;
    color: #f1f5f9;
}

/* Live Screen HUD */
.advance-ad-live-hud {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.advance-ad-live-hud.live-alert-rogue {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.ad-live-hud-info {
    flex: 1;
    display: flex;
    align-items: center;
}

.ad-live-hud-detail {
    font-size: 0.88rem;
    font-weight: 500;
    color: #f1f5f9;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Realtime HUD Status Badge */
.ad-live-hud-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    user-select: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: default;
}

/* Green Live Active Status (Pulsing Green Light) */
.ad-live-hud-status.status-live {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
}

.ad-live-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: livePulseGreen 1.6s infinite ease-in-out;
}

@keyframes livePulseGreen {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.85);
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
    }
}

/* Yellow Warning / Inactive Status (Blinking Yellow Triangle) */
.ad-live-hud-status.status-warning {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #facc15;
}

/* Blue / Indigo Ready Status (Waiting for scan) */
.ad-live-hud-status.status-ready {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}

/* Cyan / Blue Scanning Status (In-progress scan) */
.ad-live-hud-status.status-scanning {
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.35);
    color: #38bdf8;
}

.ad-live-status-triangle {
    font-size: 0.85rem;
    line-height: 1;
    display: inline-block;
    animation: liveBlinkYellow 1.2s infinite ease-in-out;
}

@keyframes liveBlinkYellow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(234, 179, 8, 0.8));
    }

    50% {
        opacity: 0.2;
        transform: scale(0.9);
        filter: drop-shadow(0 0 0px rgba(234, 179, 8, 0));
    }
}

/* AdActivity App Cards */
.advance-ad-workspace {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 280px;
}

.advance-ad-cards-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.advance-ad-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.2s ease;
}

.advance-ad-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.advance-ad-card.card-rogue {
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.advance-ad-card.card-overlay {
    border-left: 4px solid #eab308;
    background: rgba(234, 179, 8, 0.04);
}

.advance-ad-card.card-inapp {
    border-left: 4px solid #22c55e;
    background: rgba(34, 197, 94, 0.04);
}

.advance-ad-card.card-clean {
    border-left: 4px solid #64748b;
}

.advance-ad-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
}

.advance-ad-info {
    flex: 1;
    min-width: 0;
}

.advance-ad-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.advance-ad-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
}

.advance-ad-pkg {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advance-ad-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Badges */
.badge-ad-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}

.badge-ad-rogue {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.badge-ad-overlay {
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #fef08a;
}

.badge-ad-inapp {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.badge-ad-clean {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.badge-ad-sdk {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-feature-video {
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.badge-feature-reward {
    background: rgba(234, 179, 8, 0.14) !important;
    border: 1px solid rgba(234, 179, 8, 0.35) !important;
    color: #fde047 !important;
}

.badge-feature-banner {
    background: rgba(139, 92, 246, 0.14) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    color: #ddd6fe !important;
}

.badge-feature-module {
    background: rgba(59, 130, 246, 0.14) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
}

.badge-ad-boot {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #fdba74;
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Actions in Card */
.advance-ad-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.advance-ad-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-ad-action {
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
}

.btn-ad-action.confirming {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
    animation: btnConfirmPulse 1.2s infinite ease-in-out;
}

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

.btn-ad-stop {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.btn-ad-stop:hover {
    background: rgba(245, 158, 11, 0.25);
}

.btn-ad-uninstall {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-ad-uninstall:hover {
    background: rgba(239, 68, 68, 0.25);
}

.btn-ad-virus {
    background: rgba(147, 51, 234, 0.15);
    color: #c084fc;
    border-color: rgba(147, 51, 234, 0.3);
}

.btn-ad-virus:hover {
    background: rgba(147, 51, 234, 0.25);
}

.btn-ad-clear-cache {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border-color: rgba(14, 165, 233, 0.3);
}

.btn-ad-clear-cache:hover {
    background: rgba(14, 165, 233, 0.25);
}

.btn-ad-clear-data {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.3);
}

.btn-ad-clear-data:hover {
    background: rgba(244, 63, 94, 0.25);
}

/* Storage Telemetry Row on Ad Card */
.advance-ad-storage-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    font-size: 0.76rem;
    margin-top: 3px;
    color: var(--text-muted, #94a3b8);
}

.storage-sub {
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.storage-sub strong {
    font-weight: 600;
    color: #f1f5f9;
}

.storage-sub.storage-total {
    color: #94a3b8;
}

.storage-sub.storage-total strong {
    color: #93c5fd;
    font-weight: 700;
}

/* In-Place Saved SHA Success Box (Rule #3: Inline Feedback) */
.advance-saved-success-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 78, 59, 0.16) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.3s ease;
}

.advance-saved-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.advance-saved-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.advance-saved-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.advance-saved-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #6ee7b7;
}

.advance-saved-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: #a7f3d0;
    opacity: 0.85;
}

.advance-saved-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.advance-saved-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
}

.advance-saved-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
}

.advance-saved-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.advance-saved-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advance-saved-item-pkg {
    font-size: 0.72rem;
    color: #94a3b8;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advance-saved-item-sha {
    font-size: 0.72rem;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.advance-saved-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.advance-saved-item-badge {
    font-size: 0.72rem;
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-advance-vault-jump {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.35) 100%);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-advance-vault-jump:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, rgba(5, 150, 105, 0.5) 100%);
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.advance-saved-inline-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 78, 59, 0.22) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    animation: fadeIn 0.3s ease;
}

.advance-saved-inline-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #d1fae5;
}

/* ═══ Cloud Header Bar & Desktop Bridge Indicator ═══ */
.cloud-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(20, 24, 33, 0.65);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 8px;
    border-radius: 12px;
}

.cloud-header-left, .cloud-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bridge-status-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bridge-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bridge-status-chip,
.btn-download-bridge,
.bridge-portable-link {
    box-sizing: border-box;
    height: 28px;
    white-space: nowrap;
}

.bridge-status-chip .bridge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bridge-status-chip.online {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.bridge-status-chip.online .bridge-dot {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.bridge-status-chip.pending {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}
.bridge-status-chip.pending .bridge-dot {
    background: #fbbf24;
    box-shadow: 0 0 8px #fbbf24;
}

.bridge-status-chip.offline {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}
.bridge-status-chip.offline .bridge-dot {
    background: #64748b;
}

.btn-download-bridge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 500;
    color: #cbd5e1;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.38);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.btn-download-bridge:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(129, 140, 248, 0.65);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}
.btn-download-bridge svg {
    color: #818cf8;
    flex-shrink: 0;
}
.btn-download-bridge.hidden {
    display: none !important;
}
.bridge-download-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.bridge-setup-primary { padding:0 12px; border-radius:6px; color:#0d1117; background:#34d399; border-color:#34d399; font-weight:600; }
.bridge-setup-primary:hover { background:#6ee7b7; color:#0d1117; transform:none; box-shadow:none; }
.bridge-setup-primary svg { color:currentColor; }
.bridge-portable-link { display:inline-flex; align-items:center; font-size:0.76rem; color:var(--text-secondary); text-decoration:underline; text-underline-offset:3px; }
#bridge-download-status { flex-basis:100%; margin:0; font-size:0.8rem; }
#bridge-download-status:empty { display:none; }
#bridge-version-warning { flex-basis:100%; margin:0; color:var(--danger, #f87171); font-size:0.8rem; }
.bridge-account-approval {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #38bdf8;
    box-sizing: border-box;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.bridge-account-approval.fade-out {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}
.bridge-account-approval.hidden {
    display: none !important;
}
.bridge-account-approval p { margin: 0; font-size: inherit; }
.bridge-account-approval button { white-space: normal; font-size: inherit; }
#bridge-setup-code { width:100%; margin:6px 0; padding:7px 9px; background:#0d1117; color:inherit; border:1px solid #23272e; border-radius:5px; }
#bridge-download-status {
    color: #94a3b8;
    font-size: 0.76rem;
}

.connect-toolbar-row {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

.btn-auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.btn-auth-chip.btn-xs {
    font-size: 0.74rem;
    padding: 3px 7px;
    border-radius: 6px;
}
.btn-auth-chip .auth-chip-icon,
.theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.btn-auth-chip .auth-chip-name {
    max-width: none;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.btn-auth-chip .auth-chip-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    line-height: 1.1;
    border-radius: 8px;
}
.btn-auth-chip.logged-in {
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.1);
    color: #c7d2fe;
}
.btn-auth-chip.logged-in:hover {
    border-color: rgba(99, 102, 241, 0.7);
    background: rgba(99, 102, 241, 0.18);
}
.btn-auth-chip.trial-user {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}
.btn-auth-chip.admin-user {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

/* ═══ Auth Modal & 24h Hardware Lockout UI ═══ */
.auth-modal-card {
    max-width: 480px;
    width: 92%;
    background: #131720;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
}

.auth-modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    z-index: 10;
}
.auth-modal-close-btn:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.auth-header-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.auth-header-icon {
    font-size: 1.6rem;
}
.auth-header-subtitle {
    display: block;
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 2px;
}

.auth-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
}
.auth-tab-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.auth-tab-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.auth-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #fca5a5;
    font-size: 0.85rem;
    animation: fadeIn 0.25s ease;
}
.auth-warning-banner .banner-icon {
    font-size: 1.4rem;
}
.countdown-chip {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    background: rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    font-weight: 700;
    color: #ffffff;
    font-family: monospace;
}

.auth-inline-feedback {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 12px;
}
.auth-inline-feedback.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.auth-inline-feedback.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.auth-input-group {
    margin-bottom: 14px;
}
.auth-input-group label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #cbd5e1;
    margin-bottom: 5px;
    font-weight: 500;
}
.auth-input-group input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}
.auth-input-group input:focus {
    border-color: #6366f1;
}
.auth-input-group input.input-mono {
    font-family: monospace;
    font-size: 0.8rem;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.45);
}
.auth-hwid-tip {
    font-size: 0.72rem;
    color: #64748b;
}

.btn-auth-submit {
    width: 100%;
    padding: 11px;
    font-size: 0.92rem;
    font-weight: 600;
}

/* Profile Card */
.auth-profile-card {
    padding: 4px;
}
.auth-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}
.auth-avatar {
    font-size: 2.2rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-profile-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.auth-username {
    font-size: 1.1rem;
    color: #ffffff;
}
.auth-role-tag {
    font-size: 0.75rem;
    color: #94a3b8;
}

.auth-details-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.auth-detail-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.auth-detail-label {
    display: block;
    font-size: 0.74rem;
    color: #94a3b8;
    margin-bottom: 3px;
}
.auth-detail-value {
    color: #f1f5f9;
    font-size: 0.9rem;
}
.auth-hwid-code {
    display: block;
    font-family: monospace;
    font-size: 0.8rem;
    color: #38bdf8;
    word-break: break-all;
}

.auth-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.btn-auth-profile-dashboard {
    width: 100%;
    padding: 11px 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #38bdf8;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.1);
}
.btn-auth-profile-dashboard:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(56, 189, 248, 0.35));
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
    transform: translateY(-1px);
}
.btn-auth-profile-logout {
    flex: 1;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-auth-profile-logout:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: #ef4444;
    color: #ffffff;
}
.btn-auth-profile-logout.confirming {
    background: #ef4444;
    border-color: #dc2626;
    color: #ffffff;
}
.btn-auth-profile-close {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-auth-profile-close:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════
   👑 Master Admin Console Styles
   ═══════════════════════════════════════════════════════ */
.btn-admin-chip {
    background: linear-space, linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(245, 158, 11, 0.28));
    border: 1px solid rgba(234, 179, 8, 0.45);
    color: #fef08a;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-admin-chip:hover {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.32), rgba(245, 158, 11, 0.45));
    border-color: #facc15;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.3);
    transform: translateY(-1px);
}

.admin-modal-card {
    max-width: 1100px;
    width: 95vw;
    height: 88vh;
    display: flex;
    flex-direction: column;
    background: #11141b;
    border: 1px solid rgba(234, 179, 8, 0.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(234, 179, 8, 0.08);
}
.admin-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(234, 179, 8, 0.04);
}
.admin-header-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-header-icon {
    font-size: 1.8rem;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-header-subtitle {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2px;
}
.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Telemetry Grid */
.admin-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.admin-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stat-icon {
    font-size: 1.5rem;
}
.stat-content {
    display: flex;
    flex-direction: column;
}
.stat-label {
    font-size: 0.72rem;
    color: #94a3b8;
}
.stat-value {
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 700;
}

/* Nav Tabs */
.admin-nav-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}
.admin-tab-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.admin-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}
.admin-tab-btn.active {
    color: #facc15;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

/* Toolbar */
.admin-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.admin-search-box {
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 12px;
}
.admin-search-box input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.85rem;
    padding: 9px 0;
}
.admin-filter-group {
    display: flex;
    gap: 8px;
}
.admin-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.82rem;
    padding: 0 10px;
    outline: none;
}

/* Data Table */
.admin-table-container {
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}
.admin-table th {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.table-user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.table-user-name {
    font-weight: 600;
    color: #f8fafc;
}
.table-user-email {
    font-size: 0.72rem;
    color: #64748b;
}

.table-hwid-code {
    font-family: monospace;
    font-size: 0.74rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.table-actions-cell {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* In-place Buttons */
.btn-admin-act {
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-act-add-time {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}
.btn-act-add-time:hover {
    background: rgba(16, 185, 129, 0.3);
}
.btn-act-reset-hw {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border-color: rgba(234, 179, 8, 0.3);
}
.btn-act-reset-hw:hover {
    background: rgba(234, 179, 8, 0.3);
}
.btn-act-kick {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}
.btn-act-kick:hover {
    background: rgba(239, 68, 68, 0.3);
}
.btn-act-confirm {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    animation: pulse-border 1.5s infinite;
}
.btn-act-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.2);
}

.admin-inline-feedback {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-inline-feedback.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.admin-inline-feedback.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

/* Bridges Grid */
.admin-bridges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.admin-bridge-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bridge-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bridge-card-title {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}

/* ══════════════════════════════════════════════════
   Advance Modal — System Apps Inspector & Controller
   ══════════════════════════════════════════════════ */
.advance-sys-filters .btn {
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.18s ease;
}

.advance-sys-filters .btn:hover {
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
}

.advance-sys-filters .btn.active {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.45);
    color: #c7d2fe;
    font-weight: 600;
}

.advance-sys-cards-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 24px;
}

.advance-sys-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #141822;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.advance-sys-card:hover {
    background: #181d2a;
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.advance-sys-card.disabled-app {
    opacity: 0.75;
    background: #11141b;
    border-color: rgba(239, 68, 68, 0.18);
}

.advance-sys-app-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.advance-sys-app-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.advance-sys-app-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
}

.advance-sys-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.advance-sys-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.advance-sys-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 440px;
}

.advance-sys-name.advance-sys-pkg-only {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 500;
    color: #e2e8f0;
}

.advance-sys-badge-active {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.advance-sys-badge-disabled {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.advance-sys-pkg {
    font-size: 0.75rem;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.advance-sys-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.advance-sys-btn-action {
    height: 28px;
    padding: 0 10px;
    font-size: 0.74rem;
    font-weight: 500;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #cbd5e1);
    transition: all 0.18s ease;
}

.advance-sys-btn-action:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.advance-sys-btn-action.btn-disable {
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
}

.advance-sys-btn-action.btn-disable:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ffffff;
}

.advance-sys-btn-action.btn-enable {
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
    background: rgba(34, 197, 94, 0.08);
}

.advance-sys-btn-action.btn-enable:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.6);
    color: #ffffff;
}

.advance-sys-btn-action.btn-confirm-step {
    background: #b91c1c !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    animation: pulseConfirm 1.2s infinite;
}

@keyframes pulseConfirm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}


/* ══════════════════════════════════════════════════
   Compact View (1366x768 Mode)
   Scope: ONLY applies when body.compact-768 is active
   ══════════════════════════════════════════════════ */
.btn-compact-view {
    transition: all 0.2s ease;
}

.btn-compact-view.active {
    background: rgba(56, 189, 248, 0.16) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

/* 1. Layout Container & Spacing (Zero Window Scroll in Compact 1366x768) */
html:has(body.compact-768),
body.compact-768 {
    overflow-y: hidden !important;
}

body.compact-768 .app-layout-container {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.compact-768 main {
    gap: 6px !important;
    height: calc(100vh - 12px) !important;
    max-height: calc(100vh - 12px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 2. Top Header & Connect Tabs */
body.compact-768 .top-nav,
body.compact-768 .app-header {
    margin-bottom: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

body.compact-768 #section-connect {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

body.compact-768 #section-connect.is-collapsed {
    padding: 4px 10px !important;
}

body.compact-768 .connect-summary {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

body.compact-768 .conn-mode-tabs {
    margin-bottom: 6px !important;
}

/* 3. Connection Cards & Guides */
body.compact-768 .connect-grid {
    margin-top: 8px !important;
    gap: 12px !important;
    min-height: auto !important;
}

body.compact-768 .qr-panel,
body.compact-768 .adb-panel-card {
    padding: 12px 16px !important;
    margin-top: 6px !important;
    border-radius: 10px !important;
}

body.compact-768 .qr-panel h2,
body.compact-768 .adb-panel-card h2 {
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}

body.compact-768 .adb-panel-card h3 {
    margin: 6px 0 8px !important;
    font-size: 0.98rem !important;
}

body.compact-768 .adb-guide-box {
    padding: 8px 12px !important;
    gap: 5px !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

body.compact-768 .adb-guide-step {
    font-size: 0.78rem !important;
    margin-bottom: 2px !important;
}

body.compact-768 .connect-panel {
    padding: 10px 14px !important;
}

body.compact-768 .status-indicator {
    margin-bottom: 8px !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
}

body.compact-768 .input-group {
    margin-bottom: 8px !important;
}

body.compact-768 .connect-details-footer {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* 4. Pre-Uninstall Review Modal (Always fits 768px height) */
body.compact-768 .uninstall-review-card {
    max-height: 94vh !important;
    border-radius: 12px !important;
}

body.compact-768 .uninstall-review-header {
    padding: 10px 16px 8px !important;
}

body.compact-768 .uninstall-review-icon-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
}

body.compact-768 .uninstall-review-title {
    font-size: 0.95rem !important;
    margin-bottom: 1px !important;
}

body.compact-768 .uninstall-review-subtitle {
    font-size: 0.72rem !important;
}

body.compact-768 .uninstall-review-search-bar {
    padding: 6px 16px !important;
}

body.compact-768 .uninstall-review-body {
    padding: 6px 16px !important;
    max-height: calc(94vh - 175px) !important;
}

body.compact-768 .uninstall-review-app-row {
    padding: 5px 10px !important;
    margin-bottom: 4px !important;
}

body.compact-768 .uninstall-review-app-icon {
    width: 28px !important;
    height: 28px !important;
}

body.compact-768 .uninstall-review-footer {
    padding: 8px 16px !important;
}

body.compact-768 .uninstall-review-btn-cancel,
body.compact-768 .uninstall-review-btn-confirm {
    height: 32px !important;
    font-size: 0.8rem !important;
    padding: 0 14px !important;
}

/* 5. Rules Database Modal (Dual Columns) */
body.compact-768 .rules-modal-wrapper,
body.compact-768 .rules-modal-card {
    max-height: 95vh !important;
    border-radius: 12px !important;
}

body.compact-768 .rules-modal-header {
    padding: 8px 16px 6px !important;
}

body.compact-768 .rules-unified-toolbar {
    padding: 6px 16px !important;
}

body.compact-768 .rules-columns-wrapper {
    padding: 6px 16px !important;
    gap: 8px !important;
}

body.compact-768 .rules-column-header {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
}

body.compact-768 .rules-list-box {
    max-height: calc(95vh - 225px) !important;
}

/* 6. App List Area (Internal Scroll Only, Docked Actions Always In View) */
body.compact-768 .apps-drawer-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    overflow: hidden !important;
}

body.compact-768 #section-apps:not(.hidden) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 16px 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.compact-768 .section-header {
    margin-bottom: 6px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

body.compact-768 .section-header h2 {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}

body.compact-768 .search-box {
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
}

body.compact-768 .search-box input {
    padding: 5px 12px 5px 32px !important;
    font-size: 0.8rem !important;
    height: 32px !important;
}

body.compact-768 .app-list-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
}

body.compact-768 .app-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    overflow-y: auto !important;
}

body.compact-768 .app-item {
    padding: 5px 10px !important;
    gap: 8px !important;
}

body.compact-768 .app-item .app-icon {
    width: 28px !important;
    height: 28px !important;
}

body.compact-768 .app-item .app-name {
    font-size: 0.82rem !important;
}

body.compact-768 .app-item .app-pkg {
    font-size: 0.70rem !important;
}

body.compact-768 .section-footer {
    margin-top: 6px !important;
    padding-top: 4px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

body.compact-768 .section-footer .btn {
    height: 34px !important;
    min-width: 120px !important;
    padding: 4px 12px !important;
    font-size: 0.82rem !important;
}

/* 7. Screen Mirroring Drawer */
body.compact-768 #drawer-screen-mirror {
    max-height: calc(100vh - 16px) !important;
}

body.compact-768 #scrcpy-canvas,
body.compact-768 .mirror-canvas-wrapper canvas {
    max-height: calc(100vh - 180px) !important;
    width: auto !important;
    object-fit: contain !important;
}

/* ==================== 0-Overflow Standalone Connection Hub ==================== */
@media (display-mode: standalone) {
    html:not(:has(body.device-connected)),
    body:not(.device-connected) {
        overflow-y: hidden !important;
    }
}

body:not(.device-connected) .apps-drawer-stage,
body:has(#section-apps.hidden):not(.device-connected) .apps-drawer-stage {
    display: none !important;
}

/* ==================== 0-Overflow Full-Viewport Dashboard ==================== */
@media screen and (min-width: 641px) {
    html:has(body.device-connected),
    html:has(#section-apps:not(.hidden)),
    body.device-connected,
    body:has(#section-apps:not(.hidden)) {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: hidden !important;
    }

    body.device-connected .app-layout-container,
    body:has(#section-apps:not(.hidden)) .app-layout-container {
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 8px 16px 6px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: stretch !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 960px !important;
        margin: 0 auto !important;
        transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.device-connected .app-layout-container.drawer-open,
    body.device-connected .app-layout-container.mirror-open,
    body:has(#section-apps:not(.hidden)) .app-layout-container.drawer-open,
    body:has(#section-apps:not(.hidden)) .app-layout-container.mirror-open {
        max-width: 1440px !important;
    }

    body.device-connected .app-layout-container.drawer-open.mirror-open,
    body:has(#section-apps:not(.hidden)) .app-layout-container.drawer-open.mirror-open {
        max-width: 1860px !important;
    }

    body.device-connected main,
    body:has(#section-apps:not(.hidden)) main {
        flex: 1 1 960px !important;
        min-height: 0 !important;
        height: calc(100vh - 14px) !important;
        max-height: calc(100vh - 14px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 960px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), flex 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app-layout-container.drawer-open main,
    .app-layout-container.mirror-open main,
    body.device-connected .app-layout-container.drawer-open main,
    body.device-connected .app-layout-container.mirror-open main,
    body:has(#section-apps:not(.hidden)) .app-layout-container.drawer-open main,
    body:has(#section-apps:not(.hidden)) .app-layout-container.mirror-open main {
        flex: 1 1 1440px !important;
        max-width: 1440px !important;
    }

    .app-layout-container.drawer-open.mirror-open main,
    body.device-connected .app-layout-container.drawer-open.mirror-open main,
    body:has(#section-apps:not(.hidden)) .app-layout-container.drawer-open.mirror-open main {
        flex: 1 1 1860px !important;
        max-width: 1860px !important;
    }

    body.device-connected #section-connect,
    body:has(#section-apps:not(.hidden)) #section-connect {
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        max-width: 960px !important;
        width: 100% !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
        transition: margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app-layout-container.mirror-open #section-connect,
    body.device-connected .app-layout-container.mirror-open #section-connect,
    body:has(#section-apps:not(.hidden)) .app-layout-container.mirror-open #section-connect {
        margin-left: 400px !important;
    }

    body.device-connected #section-connect.is-collapsed,
    body:has(#section-apps:not(.hidden)) #section-connect.is-collapsed {
        padding: 4px 10px !important;
    }

    body.device-connected .connect-summary,
    body:has(#section-apps:not(.hidden)) .connect-summary {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    body.device-connected .apps-drawer-stage,
    body:has(#section-apps:not(.hidden)) .apps-drawer-stage {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        gap: 0;
        transition: gap 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app-layout-container.drawer-open .apps-drawer-stage,
    .app-layout-container.mirror-open .apps-drawer-stage,
    body.device-connected .app-layout-container.drawer-open .apps-drawer-stage,
    body.device-connected .app-layout-container.mirror-open .apps-drawer-stage,
    body:has(#section-apps:not(.hidden)) .app-layout-container.drawer-open .apps-drawer-stage,
    body:has(#section-apps:not(.hidden)) .app-layout-container.mirror-open .apps-drawer-stage {
        gap: 20px !important;
    }

    body.device-connected #section-apps:not(.hidden),
    body:has(#section-apps:not(.hidden)) #section-apps:not(.hidden) {
        flex: 1 1 960px !important;
        min-width: 520px !important;
        width: 100% !important;
        max-width: 960px !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 18px 12px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* When Play Store Drawer or Mirror Drawer is closed: must take strictly zero space */
    .playstore-drawer:not(.active),
    .app-layout-container:not(.drawer-open) .playstore-drawer,
    .app-layout-container:not(.mirror-open) .mirror-drawer {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        flex: 0 0 0% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* Only when drawer is OPEN & ACTIVE: expand smoothly to 380px with full height & bottom frame */
    .app-layout-container.drawer-open .apps-drawer-stage .playstore-drawer.active {
        flex: 0 0 380px !important;
        width: 380px !important;
        min-width: 350px !important;
        max-width: 380px !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-lg) !important;
        background: var(--bg-secondary) !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .app-layout-container.drawer-open .apps-drawer-stage .playstore-drawer.active .drawer-header {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
    }

    .app-layout-container.drawer-open .apps-drawer-stage .playstore-drawer.active .drawer-body {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding: 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        box-sizing: border-box !important;
    }

    .app-layout-container.drawer-open .apps-drawer-stage .playstore-drawer.active .drawer-footer {
        flex-shrink: 0 !important;
        padding: 12px 16px 14px 16px !important;
        background: var(--bg-tertiary) !important;
        border-top: 1px solid var(--border) !important;
        border-bottom-left-radius: var(--radius-lg) !important;
        border-bottom-right-radius: var(--radius-lg) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* Only when mirror is OPEN: expand left drawer to 380px with full height & bottom alignment */
    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer {
        flex: 0 0 380px !important;
        width: 380px !important;
        min-width: 350px !important;
        max-width: 380px !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-lg) !important;
        background: var(--bg-secondary) !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer .mirror-drawer-header {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer #mirror-wifi-view-badge,
    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer #mirror-ad-hunter-bar {
        flex-shrink: 0 !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer .mirror-drawer-body {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: stretch !important;
        background: var(--bg-primary) !important;
        box-sizing: border-box !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer .mirror-viewport-container {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: var(--bg-card) !important;
        border: 1.5px solid var(--border) !important;
        box-sizing: border-box !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer .mirror-canvas-wrapper {
        position: relative !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #000 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer .mirror-canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    .app-layout-container.mirror-open .apps-drawer-stage .mirror-drawer .mirror-ussd-bar {
        flex-shrink: 0 !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 4px 6px !important;
        background: var(--bg-tertiary, #161b22) !important;
        border-top: 1px solid var(--border) !important;
        box-sizing: border-box !important;
    }

    body.device-connected .section-header,
    body:has(#section-apps:not(.hidden)) .section-header {
        margin-bottom: 6px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    body.device-connected .section-header h2,
    body:has(#section-apps:not(.hidden)) .section-header h2 {
        font-size: 0.95rem !important;
        margin-bottom: 0 !important;
    }

    body.device-connected .search-box,
    body:has(#section-apps:not(.hidden)) .search-box {
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }

    body.device-connected .search-box input,
    body:has(#section-apps:not(.hidden)) .search-box input {
        padding: 5px 12px 5px 32px !important;
        font-size: 0.8rem !important;
        height: 32px !important;
    }

    body.device-connected .app-list-wrapper,
    body:has(#section-apps:not(.hidden)) .app-list-wrapper {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    body.device-connected .app-list,
    body:has(#section-apps:not(.hidden)) .app-list {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    body.device-connected #app-list:not([class*="density-"]) .app-item,
    body:has(#section-apps:not(.hidden)) #app-list:not([class*="density-"]) .app-item {
        padding: 6px 12px !important;
        gap: 10px !important;
    }

    body.device-connected #app-list:not([class*="density-"]) .app-item .app-icon,
    body:has(#section-apps:not(.hidden)) #app-list:not([class*="density-"]) .app-item .app-icon {
        width: 30px !important;
        height: 30px !important;
    }

    body.device-connected #app-list:not([class*="density-"]) .app-item .app-name,
    body:has(#section-apps:not(.hidden)) #app-list:not([class*="density-"]) .app-item .app-name {
        font-size: 0.86rem !important;
    }

    body.device-connected #app-list:not([class*="density-"]) .app-item .app-package,
    body:has(#section-apps:not(.hidden)) #app-list:not([class*="density-"]) .app-item .app-package {
        font-size: 0.72rem !important;
    }

    body.device-connected .section-footer,
    body:has(#section-apps:not(.hidden)) .section-footer {
        margin-top: 14px !important;
        padding-top: 4px !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    body.device-connected .section-footer .btn,
    body:has(#section-apps:not(.hidden)) .section-footer .btn {
        height: 42px !important;
        min-width: 140px !important;
        padding: 8px 16px !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        border-radius: var(--radius-sm, 8px) !important;
    }
}

/* QR expiry and download actions */
#qr-expiry-actions, .qr-download-actions { display: flex; align-items: center; gap: 8px; width: min(100%, 320px); margin: 10px auto 0; }
#qr-expiry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#qr-expiry-label { flex: 1 1 0; min-width: 0; text-align: center; margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
#qr-regenerate { flex: 1 1 0; min-width: 0; height: 36px; margin: 0; padding: 6px 8px; box-sizing: border-box; font-size: 12px; text-align: center; }
.qr-download-actions > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0; height: 36px; padding: 6px 8px; margin: 0; box-sizing: border-box; font-size: 12px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.qr-download-actions svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Connect QR uses instructions above the code instead of a duplicate heading/status. */
.qr-panel.qr-connect-stage .qr-download-heading,
.qr-panel.qr-connect-stage #qr-job-status.qr-ready-status { display: none; }


/* Technician Master Dashboard is now a Dedicated Standalone Window (/dashboard) */

/* Technician Master Dashboard Dedicated Sidebar Nav */
.dash-nav-tab {
    cursor: pointer;
    border: none;
    background: transparent;
}

.btn-chart-range {
    background: transparent;
    border: none;
    color: #8b949e;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-chart-range:hover {
    color: #f0f6fc;
}

.btn-chart-range.active {
    background: #21262d;
    color: #10b981;
}

.tmpl-radio-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: #d1d5db;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tmpl-radio-item:hover {
    border-color: #38bdf8;
}

.tmpl-radio-item input[type="radio"]:checked + span {
    color: #38bdf8;
    font-weight: 600;
}

/* Smartphone Mockup Frame */
.phone-mockup-frame {
    width: 250px;
    height: 480px;
    background: #000;
    border: 3px solid #30363d;
    border-radius: 28px;
    padding: 8px 6px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.phone-mockup-speaker {
    width: 44px;
    height: 4px;
    background: #30363d;
    border-radius: 3px;
    margin: 2px auto 6px;
    flex-shrink: 0;
}

.phone-mockup-screen {
    flex: 1;
    background: #0d1117;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

/* Inline In-Place Feedback */
.inline-feedback {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.inline-feedback.success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.inline-feedback.danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.inline-feedback.warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}