.proto-btn {
            flex: 1;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.18);
            padding: 10px 16px;
            border-radius: 14px;
            font-size: 0.8125rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.55);
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: var(--font-body);
            text-align: center;
            min-height: 44px;
        }
        .proto-btn:hover {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 255, 255, 0.30);
            color: rgba(255, 255, 255, 0.80);
        }
        .proto-btn.active {
            background: rgba(0, 190, 76, 0.12);
            border-color: rgba(0, 190, 76, 0.35);
            color: #00BE4C;
            box-shadow: 0 0 14px rgba(0, 190, 76, 0.08);
        }

        .crc-valid { color: #00BE4C; border-color: rgba(0, 190, 76, 0.40) !important; }
        .crc-invalid { color: #B43A3A; border-color: rgba(180, 58, 58, 0.40) !important; }

        .breadcrumb-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            color: rgba(255, 255, 255, 0.50);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 9999px;
            transition: color 0.2s ease, background 0.2s ease;
            font-family: var(--font-body);
            font-size: 0.75rem;
            min-height: 44px;
        }
        .breadcrumb-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

        .field-hint {
            font-size: 0.6875rem;
            color: rgba(255, 255, 255, 0.30);
            margin-top: 0.25rem;
            line-height: 1.4;
        }

        .byte-tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.12);
            font-size: 0.6875rem;
            color: rgba(255, 255, 255, 0.65);
            margin: 2px;
            font-family: var(--font-mono);
            transition: all 0.15s ease;
            cursor: default;
        }
        .byte-tag:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.22);
        }
        .byte-tag-label {
            color: rgba(255, 255, 255, 0.30);
            font-size: 0.625rem;
            font-family: var(--font-body);
            font-weight: 400;
            margin-right: 3px;
        }

        .byte-pdu {
            background: rgba(0, 147, 222, 0.10);
            border-color: rgba(0, 147, 222, 0.25);
            color: #0093DE;
        }
        .byte-crc {
            background: rgba(0, 190, 76, 0.10);
            border-color: rgba(0, 190, 76, 0.25);
            color: #00BE4C;
        }
        .byte-addr {
            background: rgba(251, 191, 36, 0.10);
            border-color: rgba(251, 191, 36, 0.25);
            color: #fbbf24;
        }
        .byte-qty {
            background: rgba(0, 147, 222, 0.10);
            border-color: rgba(0, 147, 222, 0.25);
            color: #0093DE;
        }

        .validate-section {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 16px;
        }

        .btn-copy.copied {
            background: rgba(0, 190, 76, 0.15) !important;
            border-color: rgba(0, 190, 76, 0.40) !important;
            color: #00BE4C !important;
        }

        .frame-breakdown-row {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }

        .copy-icon { transition: all 0.2s ease; }
        .copy-icon-check { color: #00BE4C; }