::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1f2937; }
        ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .proto-badge-wifi { background-color: #2563eb; color: white; }
        .proto-badge-ble { background-color: #9333ea; color: white; }
        .proto-badge-bt_classic { background-color: #0891b2; color: white; }
        .tab-active { border-bottom: 2px solid #3b82f6; color: #3b82f6; }
        .tab-inactive { color: #9ca3af; }
        .node-label { pointer-events: none; font-size: 10px; fill: #9ca3af; font-family: monospace; }
        .link { stroke: #374151; stroke-opacity: 0.6; }

/* ── Safe Area / Mobile Optimizations ────────────────────────────── */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* Pad body for notch/island devices */
body {
    padding-top: var(--sat);
    padding-left: var(--sal);
    padding-right: var(--sar);
    /* Bottom handled by notification overlay */
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Touch-friendly minimum hit targets */
button, a, [role="button"] {
    min-height: 32px;
    touch-action: manipulation;
}

/* On very small screens tighten padding */
@media (max-width: 480px) {
    .report-card { padding: 0.75rem !important; }
    /* Notifications move to bottom, account for safe area */
    .notif-container { bottom: calc(1rem + var(--sab)); right: 0.75rem; width: calc(100vw - 1.5rem); }
}

@media (max-width: 768px) {
    .report-card { padding: 1rem !important; }
}

/* PWA standalone mode — hide browser chrome artifacts */
@media (display-mode: standalone) {
    body { padding-top: max(var(--sat), 8px); }
}

/* Fluid font scaling */
@supports (font-size: clamp(10px, 1.5vw, 14px)) {
    .fluid-text { font-size: clamp(10px, 1.5vw, 14px); }
}

/* Real-time Notifications */
.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

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

.notif-enter-active, .notif-leave-active {
    transition: all 0.3s ease;
}

/* FirewallView form helpers */
.label {
    display: block;
    font-size: 0.625rem;   /* text-[10px] */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;        /* text-gray-500 */
    margin-bottom: 0.25rem;
}
.field {
    width: 100%;
    background: #111827;   /* bg-gray-900 */
    border: 1px solid #374151; /* border-gray-700 */
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;    /* text-xs */
    color: #f9fafb;
    outline: none;
    transition: border-color 0.15s;
}
.field:focus {
    border-color: #ef4444; /* focus:border-red-500 */
}
.notif-enter-from {
    transform: translateX(30px);
    opacity: 0;
}
.notif-leave-to {
    transform: translateX(30px);
    opacity: 0;
}