/* Pinout-Seite: Stile der beiden früheren Einzel-Tools, zusammengeführt (ohne Tailwind-CDN). */
.pinout-app { --bg-color:#070b14; --panel-bg:#0f172a; --text-main:#f8fafc; --text-muted:#94a3b8; }
.fam-arduino { --akzent:#2dd4bf; --akzent-hell:#5eead4; --akzent-dunkel:#0d9488; --akzent-glow:rgba(45,212,191,.28); }
.fam-esp     { --akzent:#38bdf8; --akzent-hell:#38bdf8; --akzent-dunkel:#0284c7; --akzent-glow:rgba(56,189,248,.28); }
        :root {
            --bg-color: #070b14;
            --panel-bg: #0f172a;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }


        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 7px; height: 7px; }
        ::-webkit-scrollbar-track { background: #090d16; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }

        .font-mono { font-family: 'JetBrains Mono', monospace; }

        /* Board Tabs */
        .board-tab {
            background: rgba(30, 41, 59, 0.55);
            border: 1px solid #334155;
            border-radius: 8px;
            padding: 6px 14px;
            cursor: pointer;
            transition: all 0.18s ease;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        .board-tab:hover {
            background: rgba(51, 65, 85, 0.65);
            border-color: #64748b;
        }
        .board-tab.active {
            background: linear-gradient(135deg, var(--akzent-glow) 0%, rgba(15, 23, 42, 0.95) 100%);
            border-color: var(--akzent);
            box-shadow: 0 0 16px var(--akzent-glow);
        }

        /* Dynamic Arduino UNO PCB Styling */
        .uno-board {
            border-radius: 10px 18px 10px 10px;
            box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 22px 55px rgba(0,0,0,0.7);
            position: relative;
            border: 2.5px solid #0d9488;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 0 14px 0;
            z-index: 10;
            user-select: none;
            transition: all 0.25s ease;
        }
        /* Classic Arduino Teal (R3) */
        .pcb-uno-r3 {
            background: linear-gradient(145deg, #008184 0%, #005c5f 100%);
            border-color: #2dd4bf;
        }
        /* R4 Minima Deep Teal/Petroleum with Gold Accents */
        .pcb-uno-minima {
            background: linear-gradient(145deg, #0b4f52 0%, #052e31 100%);
            border-color: #eab308;
        }
        /* R4 WiFi Modern Dark Teal/Cyan */
        .pcb-uno-wifi {
            background: linear-gradient(145deg, #0e6366 0%, #06383a 100%);
            border-color: #38bdf8;
        }

        /* Pin Rows & Granular Dimming */
        .pin-row {
            display: flex;
            align-items: center;
            height: 24px;
            margin-bottom: 3px;
            cursor: pointer;
            transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .pin-row:hover {
            transform: translateY(-1px);
        }

        /* Physical Header Gap between UNO Connector Blocks */
        .header-gap {
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            letter-spacing: 0.08em;
            color: #475569;
            font-family: 'JetBrains Mono', monospace;
            text-transform: uppercase;
            user-select: none;
        }

        /* Entire pin row dimmed when pin doesn't have the selected filter at all */
        .pin-row.row-dimmed {
            opacity: 0.13;
            filter: grayscale(100%);
        }
        .pin-row.row-dimmed:hover {
            opacity: 0.48;
            filter: grayscale(35%);
        }

        /* Active selected pin row */
        .pin-row.selected-pin .pin-hole {
            transform: scale(1.28);
            border-color: var(--akzent);
            box-shadow: 0 0 12px var(--akzent);
        }
        .pin-row.selected-pin .connector-line {
            background-color: var(--akzent);
            height: 3px;
        }
        .pin-row.selected-pin .board-Silkscreen {
            color: var(--akzent-hell);
            font-weight: 800;
        }

        /* UNO Female Header Socket Look */
        .pin-hole {
            width: 14px;
            height: 14px;
            background-color: #09090b;
            border-radius: 3px;
            border: 2.5px solid #27272a;
            outline: 1px solid rgba(234, 179, 8, 0.65);
            box-shadow: inset 0 0 4px black, 0 0 3px rgba(0,0,0,0.9);
            z-index: 20;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .board-Silkscreen {
            font-family: 'JetBrains Mono', monospace;
            font-size: 8.5px;
            font-weight: 700;
            color: #f1f5f9;
            width: 36px;
            text-align: center;
            z-index: 20;
            flex-shrink: 0;
            letter-spacing: -0.03em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }

        .connector-line {
            height: 2px;
            background-color: #475569;
            width: 16px;
            z-index: 5;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        /* Badges */
        .pin-badges {
            display: flex;
            gap: 3.5px;
            align-items: center;
            transition: all 0.2s ease;
        }

        .badge {
            font-size: 0.65rem;
            font-weight: 700;
            padding: 1.5px 5.5px;
            border-radius: 4px;
            white-space: nowrap;
            letter-spacing: 0.01em;
            box-shadow: 0 1px 2px rgba(0,0,0,0.45);
            font-family: 'JetBrains Mono', monospace;
            border: 1px solid rgba(255,255,255,0.16);
            transition: all 0.18s ease;
        }

        /* GRANULAR BADGE DIMMING: Applied to non-matching badges on an ACTIVE pin */
        .badge.badge-dimmed {
            opacity: 0.11 !important;
            filter: grayscale(100%) !important;
            border-color: rgba(255,255,255,0.04) !important;
            box-shadow: none !important;
            transform: scale(0.94);
        }

        /* Optional completely hidden mode for non-matching badges */
        .hide-inactive-badges .badge.badge-dimmed {
            display: none !important;
        }

        /* Highlighted badge when filter matches */
        .badge.badge-highlighted {
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0,0,0,0.6);
            border-color: rgba(255, 255, 255, 0.9);
            transform: scale(1.05);
            z-index: 2;
        }

        /* Tag Colors */
        .c-power     { background-color: #dc2626; color: #ffffff; } /* 3.3V Red */
        .c-5v        { background-color: #b91c1c; color: #ffffff; border-color: #f87171; } /* 5V / VIN Deep Red */
        .c-gnd       { background-color: #09090b; color: #e4e4e7; border-color: #52525b; } /* GND Black */
        .c-control   { background-color: #52525b; color: #ffffff; } /* RESET / IOREF Zinc */
        .c-gpio      { background-color: #2563eb; color: #ffffff; } /* Standard Pin Blue */
        .c-safe      { background-color: #15803d; color: #ffffff; border-color: #4ade80; } /* Digital I/O Green */
        .c-adc       { background-color: #991b1b; color: #fecaca; border-color: #f87171; } /* Analog In Dark Red */
        .c-dac       { background-color: #db2777; color: #ffffff; border-color: #f472b6; } /* True DAC Pink */
        .c-opamp     { background-color: #d97706; color: #fffbeb; border-color: #fcd34d; } /* OPAMP Amber */
        .c-pwm       { background-color: #0284c7; color: #e0f2fe; } /* PWM (~) Sky Blue */
        .c-irq       { background-color: #9333ea; color: #f3e8ff; border-color: #c084fc; } /* External Interrupt Purple */
        .c-spi       { background-color: #059669; color: #ffffff; } /* SPI Emerald */
        .c-i2c       { background-color: #0d9488; color: #ffffff; border-color: #5eead4; } /* I2C Teal */
        .c-uart      { background-color: #4f46e5; color: #ffffff; } /* UART Indigo */
        .c-can       { background-color: #0891b2; color: #cffafe; border-color: #67e8f9; font-weight: 800; } /* CAN Bus Cyan */
        .c-special   { background-color: #eab308; color: #09090b; border-color: #fef08a; } /* Special / LED / VRTC / OFF Yellow */
        .c-nc        { background-color: #334155; color: #94a3b8; } /* NC Slate */

        /* Filter Buttons */
        .filter-btn {
            background-color: #1e293b;
            border: 1px solid #334155;
            color: #cbd5e1;
            padding: 4px 9px;
            border-radius: 6px;
            font-size: 0.71rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.14s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .filter-btn:hover {
            border-color: #64748b;
            color: #ffffff;
            background-color: #26354d;
        }
        .filter-btn.active {
            background-color: var(--akzent-dunkel);
            border-color: var(--akzent-hell);
            color: white;
            box-shadow: 0 0 12px var(--akzent-glow);
        }
        .filter-btn.empty-cat {
            opacity: 0.4;
            border-style: dashed;
        }

        .dot-indicator {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            display: inline-block;
        }

        /* 12x8 LED Matrix Animation on UNO R4 WiFi */
        .matrix-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1.5px;
            background: #18181b;
            padding: 3px;
            border-radius: 3px;
            border: 1px solid #3f3f46;
        }
        .matrix-dot {
            width: 4px;
            height: 4px;
            border-radius: 1px;
            background-color: #27272a;
        }
        .matrix-dot.lit {
            background-color: #ef4444;
            box-shadow: 0 0 4px #ef4444;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(3px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in { animation: fadeIn 0.2s ease forwards; }
        /* Dynamic PCB Styling */
        .esp-board {
            border-radius: 10px;
            box-shadow: inset 0 0 14px rgba(0,0,0,0.9), 0 20px 50px rgba(0,0,0,0.65);
            position: relative;
            border: 2px solid #3f3f46;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 14px 0 14px 0;
            z-index: 10;
            user-select: none;
            transition: width 0.25s ease, background 0.25s ease;
        }
        .pcb-dark { background: linear-gradient(145deg, #27272a 0%, #18181b 100%); border-color: #3f3f46; }
        .pcb-blue { background: linear-gradient(145deg, #1e3a8a 0%, #172554 100%); border-color: #3b82f6; }
        .pcb-red  { background: linear-gradient(145deg, #450a0a 0%, #270909 100%); border-color: #991b1b; }
        .pcb-teal { background: linear-gradient(145deg, #134e4a 0%, #042f2e 100%); border-color: #14b8a6; }

        .esp-antenna-area {
            width: 116px;
            height: 32px;
            background: #111113;
            border: 1px solid #27272a;
            border-radius: 4px 4px 0 0;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .esp-chip {
            background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 100%);
            width: 116px;
            height: 112px;
            border-radius: 3px;
            margin-bottom: 12px;
            box-shadow: inset -1px -1px 4px rgba(0,0,0,0.3), inset 1px 1px 4px rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #27272a;
            font-weight: 700;
            text-align: center;
            padding: 0.4rem;
            border: 1px solid #71717a;
            flex-direction: column;
            position: relative;
        }


        /* ESP-Badges */
        .c-dpin      { background-color: #0f172a; color: #38bdf8; border-color: #0284c7; }
        .c-input     { background-color: #ea580c; color: #ffffff; }
        .c-adc1      { background-color: #991b1b; color: #fecaca; border-color: #f87171; }
        .c-adc2      { background-color: #7f1d1d; color: #fca5a5; border-style: dashed; border-color: #ef4444; }
        .c-touch     { background-color: #9333ea; color: #f3e8ff; }
        .c-usb       { background-color: #06b6d4; color: #083344; font-weight: 800; border-color: #cffafe; }
        .c-strapping { background-color: #eab308; color: #09090b; border-color: #fef08a; }
        .c-flash     { background-color: #334155; color: #94a3b8; }

        /* ESP: runde Lötaugen, schmalere Beschriftung */
        .fam-esp .pin-hole { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #eab308; outline: none; box-shadow: inset 0 0 3px black, 0 0 2px rgba(0,0,0,0.8); }
        .fam-esp .board-Silkscreen { width: 30px; color: #e4e4e7; text-shadow: none; }
        .fam-esp .filter-btn.empty-cat { opacity: .45; }